Carousel - CSS API Reference

All Common CSS variables:

Specific CSS variables for Carousel styling:

• --smart-carousel-default-width: Default width of the element.
• --smart-carousel-default-height: Default height of the element.
• --smart-carousel-3d-mode-slide-width: Default width of a slide in 3d mode.
• --smart-carousel-3d-mode-slide-height: Default height of a slide in 3d mode.
• --smart-carousel-multiple-mode-slide-width: Default width of a slide in multiple mode.

The following CSS selectors can be used to style Carousel:

• smart-carousel - the element itself. Can be used to set width and height for the whole element.
  • .smart-container - the container that holds all of the internals of the element.
    • .smart-items-container- applied to a container where are stored carousel's slides.
      • .smart-carousel-item - applied to div element, used as carousel slide.
        • .smart-carousel-item-contaiener - applied to div element, used to contain slide's headline and text content and background image.
          • .smart-carousel-item-label - applied to h2 element, used to contain slide's headline.
          • .smart-carousel-item-content - applied to div element, used to contain slide's text.
        • .smart-carousel-html-content - applied to div element, used to contain custom HTML content.
    • .smart-arrow-left- applied to smart-repeat-button used as left navigation arrow.
    • .smart-arrow-right - applied to smart-repeat-button used as right navigation arrow.
    • .smart-indicators-container - applied to div element, used as indicators container.
      • .smart-indicator - applied to span element, used as indicator.

Demo

<style>
        #carousel{
                --smart-carousel-default-width: 100%;
        }
</style>