March 16, 2026 · 4 min read

Styling Carousel Slider with theme.json and CSS variables

Carousel Slider Block keeps styles minimal, so it is easier to adjust the carousel to fit your theme, design system, and site-wide styling choices.

Theme-level control

The plugin supports CSS custom properties that can be defined in your theme stylesheet or inside theme.json under settings.custom.carousel-block.

That makes it easier to keep carousel styling consistent across a site or across client builds without editing each block instance individually.

CSS variable support

The plugin supports CSS variables for the carousel, so you can adjust styling at the theme level without changing the block markup.

You can find the full variable reference in the Styling documentation.

Example

For example, if you want larger navigation arrows and darker active pagination bullets, you can set:

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

That kind of override is usually enough to bring the carousel closer to your theme without rewriting the block styles.

Why this approach works well

Theme-level variables are a good fit for WordPress teams because they scale. Instead of hard-coding overrides in multiple places, you can set a small number of design tokens and keep the frontend aligned with the rest of the theme.

If you need more targeted overrides, the carousel still renders clean block classes, so custom CSS remains straightforward.

A practical split

Use block settings for carousel behavior such as slides per view, navigation, pagination, autoplay, and responsive breakpoints.

Use theme.json and CSS variables for repeated visual decisions that should stay consistent across multiple carousels.