Carousel Slider Block

March 25, 2026 · 4 min read

Styling Gutenberg Sliders with Block Themes, theme.json, and CSS Variables

If you are building a WordPress site with Gutenberg and a block theme, slider styling should not feel like a separate system.

Carousel Slider Block is built to work in a way that fits modern WordPress theming. You can build slides with native blocks, control carousel behaviour from block settings, and fine-tune the design with CSS variables or theme.json.

That makes it a better fit for Gutenberg sites, block themes, and developer workflows that already rely on theme-level styling.

Built for Gutenberg and block themes

Carousel Slider Block uses native Gutenberg blocks for slide content. Each slide is an inner block area, so you are not locked into a custom slide builder or shortcode-based workflow.

That matters for block themes because the slider can sit naturally inside a theme that already uses:

  • theme.json
  • global styles
  • layout settings
  • color, spacing, and typography presets
  • custom block styles

Instead of styling a completely separate slider system, you can keep the carousel closer to the rest of your WordPress design system.

Use any block as a slide

Because slides are block-based, you can build many different types of sliders with the same block:

  • hero sliders with Cover blocks
  • testimonial sliders with Quote or Group blocks
  • product sliders with WooCommerce blocks
  • logo carousels with Image blocks
  • content sliders with headings, text, buttons, and media

That is especially useful in block themes, where layout and presentation often come from combining blocks rather than using one-purpose widgets.

Style the carousel with CSS variables

Carousel Slider Block supports CSS variables for navigation, pagination, and block spacing.

That means you can make visual adjustments at the theme level without rewriting the block markup or adding one-off CSS to every slider.

For example:

: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;
}

A small set of variables like this can bring the slider closer to your theme styles immediately.

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

Use theme.json in block themes

If you are working with a block theme, you can also define these values in theme.json under settings.custom.

Example:

{
  "settings": {
    "custom": {
      "carousel-block": {
        "navigation-size": "22px",
        "navigation-color": "#111",
        "pagination-bullet-active-color": "#111"
      }
    }
  }
}

This is a cleaner option when you want carousel styles to live alongside the rest of your theme configuration.

A practical example

If you already have a block theme with established brand colors, spacing, and UI patterns, you may want the carousel controls to match the rest of the site.

Instead of overriding slider markup with custom selectors, you can set carousel-specific values in theme.json or CSS variables so the arrows, dots, and spacing follow the same design system as the rest of the theme.

For example, you might:

  • use the brand accent color for active pagination bullets
  • use a softer brand tint for inactive bullets
  • increase the navigation size to match other large interactive controls in the theme
  • change the navigation offset so arrows align better with the site’s content grid

That is a practical way to make the carousel feel like part of the theme without treating it as a one-off component.

A cleaner developer workflow

For developers, this approach is easier to maintain.

The content stays in Gutenberg blocks. The carousel behaviour stays in block settings. The design adjustments can live in CSS variables or theme.json.

That is a much cleaner split than:

  • custom slide builders
  • hard-coded shortcode output
  • isolated plugin-specific templates
  • repeated custom CSS overrides for each slider

If you are already building WordPress sites with block themes, this makes the carousel easier to fit into the same workflow.

When this is useful

This approach is especially useful when you are:

  • building with a block theme
  • trying to keep styling centralized
  • creating multiple sliders across one site
  • working on client sites where editors need a familiar Gutenberg workflow
  • aligning plugin output with a theme design system

Final thought

A Gutenberg slider works better when it behaves like the rest of Gutenberg.

Carousel Slider Block is designed for that: block-based slides, WordPress-friendly settings, and styling hooks that work with CSS variables and theme.json.

If you want a slider that fits block themes more naturally, that is where this approach becomes useful.