theme.json

If you are using a block theme, you can define Carousel Slider Block CSS variables directly in your theme’s theme.json.

This lets carousel styling live alongside the rest of your theme configuration instead of keeping those values only in a stylesheet.

Where to add the values

Add the variables under settings.custom.carousel-block.

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

For the full list of supported variables, see the Styling page.

Why use theme.json

Using theme.json can be useful when:

• you are working with a block theme
• you want carousel styling to stay in the theme configuration
• you want values to match the rest of your global styles and presets
• you prefer theme-level settings over writing custom CSS rules