Skip to content
Carousel Slider Block

Styling

The Carousel Slider Block outputs minimal HTML that is easy to target with CSS.

CSS Custom Properties

Carousel Slider v2 supports custom styling via CSS variables:

Navigation

Variable Purpose
--wp--custom--carousel-block--navigation-size Arrow icon size
--wp--custom--carousel-block--navigation-sides-offset Distance from edge
--wp--custom--carousel-block--navigation-color Arrow color
--wp--custom--carousel-block--navigation-hover-color Arrow hover color (falls back to navigation-color)
--wp--custom--carousel-block--navigation-alignfull-color Arrow color when carousel is full width

Pagination (dots)

Variable Purpose
--wp--custom--carousel-block--pagination-top Top offset
--wp--custom--carousel-block--pagination-bottom Bottom offset
--wp--custom--carousel-block--pagination-bullet-size Bullet size
--wp--custom--carousel-block--pagination-bullet-active-color Active bullet color
--wp--custom--carousel-block--pagination-bullet-inactive-color Inactive bullet color
--wp--custom--carousel-block--pagination-bullet-inactive-hover-color Inactive bullet hover color (falls back to active-color if set)
--wp--custom--carousel-block--pagination-bullet-active-opacity Active bullet opacity
--wp--custom--carousel-block--pagination-bullet-inactive-opacity Inactive bullet opacity
--wp--custom--carousel-block--pagination-bullet-inactive-hover-opacity Inactive bullet opacity on hover (falls back to inactive-opacity if not set)
--wp--custom--carousel-block--pagination-bullet-horizontal-gap Space between bullets (horizontal)
--wp--custom--carousel-block--pagination-bullet-vertical-gap Space between bullets (vertical)

Block Spacing

Variable Purpose
--wp--custom--carousel-block--image-margin-top Top margin for image blocks
--wp--custom--carousel-block--image-margin-bottom Bottom margin for image blocks
--wp--custom--carousel-block--cover-margin-top Top margin for cover blocks
--wp--custom--carousel-block--cover-margin-bottom Bottom margin for cover blocks

CSS Example

You can change the look of the carousel by defining a few CSS variables in your theme stylesheet.

:root {
  --wp--custom--carousel-block--navigation-size: 22px;
  --wp--custom--carousel-block--navigation-color: #111;
  --wp--custom--carousel-block--pagination-bullet-active-color: #111;
  --wp--custom--carousel-block--pagination-bullet-inactive-color: #999;
  --wp--custom--carousel-block--pagination-bullet-horizontal-gap: 8px;
}

If you add a custom class name to a specific carousel in the block’s Advanced settings, you can scope the variables to that carousel only.

.my-carousel {
  --wp--custom--carousel-block--navigation-size: 28px;
  --wp--custom--carousel-block--navigation-color: #b22222;
  --wp--custom--carousel-block--pagination-bullet-active-color: #b22222;
}

Theme JSON Support

If you are using a block theme, you can also define these values in theme.json. See the Theme JSON page for examples and setup details.

HTML Structure

<div class="cb-carousel-block">
  <div class="swiper">
    <div class="cb-wrapper">
      <div class="cb-slide">
        <!-- your inner blocks -->
      </div>
      <div class="cb-slide">
        <!-- more slide content -->
      </div>
    </div>
  </div>

  <div class="cb-pagination"></div>
  <div class="cb-button-prev"></div>
  <div class="cb-button-next"></div>
</div>