Carousel

Carousel allows a user to cycle through content panels. Slides of varying component type can be created.

Github URL
Adobe URL
Source URL
Title
Image Slides
Content

Carousel with three image components as child items.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
autopauseDisabled: false
delay: 5000
jcr:lastModified:
sling:resourceType: core-components-examples/components/carousel
autoplay: false
Markup:
<div class="carousel">
  <div id="carousel-c813aecaf1" class="cmp-carousel" role="group" aria-live="polite" aria-roledescription="carousel" data-cmp-delay="5000" data-cmp-data-layer="{&quot;carousel-c813aecaf1&quot;:{&quot;shownItems&quot;:[&quot;carousel-c813aecaf1-item-29f3ed4bf5&quot;],&quot;@type&quot;:&quot;core-components-examples/components/carousel&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-15T13:12:32Z&quot;}}" data-placeholder-text="false">
    <div class="cmp-carousel__content" aria-atomic="false" aria-live="polite">
      <div id="carousel-c813aecaf1-item-29f3ed4bf5" class="cmp-carousel__item cmp-carousel__item--active" role="tabpanel" aria-roledescription="slide" aria-label="Slide 1 of 3" data-cmp-data-layer="{&quot;carousel-c813aecaf1-item-29f3ed4bf5&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:21Z&quot;,&quot;dc:title&quot;:&quot;Title&quot;}}" data-cmp-hook-carousel="item">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image.coreimg{.width}.jpeg/1550672497829/lava-into-ocean.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-title="Lava flowing into the ocean" id="image-29f3ed4bf5" data-cmp-data-layer="{&quot;image-29f3ed4bf5&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:21Z&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;0f54e1b5-535b-45f7-a46b-35abb19dd6bc&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image.coreimg.jpeg/1550672497829/lava-into-ocean.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Lava flowing into the ocean">
          </div>
        </div>
      </div>
      <div id="carousel-c813aecaf1-item-34fc86e545" class="cmp-carousel__item" role="tabpanel" aria-roledescription="slide" aria-label="Slide 2 of 3" data-cmp-data-layer="{&quot;carousel-c813aecaf1-item-34fc86e545&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:15Z&quot;}}" data-cmp-hook-carousel="item" aria-hidden="true">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1622336496.coreimg{.width}.jpeg/1550672497135/snowy-mountain-glacier.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-title="Snowy mountain glacier" id="image-34fc86e545" data-cmp-data-layer="{&quot;image-34fc86e545&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:15Z&quot;,&quot;dc:title&quot;:&quot;Snowy mountain glacier&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;45c6ee92-90e1-4af2-af69-b6dcbc7daeb7&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1622336496.coreimg.jpeg/1550672497135/snowy-mountain-glacier.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Snowy mountain glacier" title="Snowy mountain glacier">
            <meta itemprop="caption" content="Snowy mountain glacier">
          </div>
        </div>
      </div>
      <div id="carousel-c813aecaf1-item-d5ac18068a" class="cmp-carousel__item" role="tabpanel" aria-roledescription="slide" aria-label="Slide 3 of 3" data-cmp-data-layer="{&quot;carousel-c813aecaf1-item-d5ac18068a&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:05Z&quot;}}" data-cmp-hook-carousel="item" aria-hidden="true">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1533234440.coreimg{.width}.jpeg/1550672498426/lava-rock-formation.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-title="Gray lava rock formation" id="image-d5ac18068a" data-cmp-data-layer="{&quot;image-d5ac18068a&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:05Z&quot;,&quot;dc:title&quot;:&quot;Gray lava rock formation&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;c58c09f6-e382-4698-bfbd-e8c8d37712c8&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:38Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1533234440.coreimg.jpeg/1550672498426/lava-rock-formation.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Gray lava rock formation" title="Gray lava rock formation">
            <meta itemprop="caption" content="Gray lava rock formation">
          </div>
        </div>
      </div>
      <div class="cmp-carousel__actions">
        <button class="cmp-carousel__action cmp-carousel__action--previous" type="button" aria-label="Previous" data-cmp-hook-carousel="previous">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Previous</span>
        </button>
        <button class="cmp-carousel__action cmp-carousel__action--next" type="button" aria-label="Next" data-cmp-hook-carousel="next">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Next</span>
        </button>
      </div>
      <ol class="cmp-carousel__indicators" role="tablist" aria-label="Choose a slide to display" data-cmp-hook-carousel="indicators">
        <li class="cmp-carousel__indicator cmp-carousel__indicator--active" role="tab" aria-controls="carousel-c813aecaf1-item-0" aria-label="Slide 1" data-cmp-hook-carousel="indicator" aria-selected="true" tabindex="0">Title</li>
        <li class="cmp-carousel__indicator" role="tab" aria-controls="carousel-c813aecaf1-item-1" aria-label="Slide 2" data-cmp-hook-carousel="indicator" aria-selected="false" tabindex="-1"></li>
        <li class="cmp-carousel__indicator" role="tab" aria-controls="carousel-c813aecaf1-item-2" aria-label="Slide 3" data-cmp-hook-carousel="indicator" aria-selected="false" tabindex="-1"></li>
      </ol>
    </div>
  </div>
</div>
JSON:
<div class="carousel">
  <div id="carousel-c813aecaf1" class="cmp-carousel" role="group" aria-live="polite" aria-roledescription="carousel" data-cmp-delay="5000" data-cmp-data-layer="{&quot;carousel-c813aecaf1&quot;:{&quot;shownItems&quot;:[&quot;carousel-c813aecaf1-item-29f3ed4bf5&quot;],&quot;@type&quot;:&quot;core-components-examples/components/carousel&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-15T13:12:32Z&quot;}}" data-placeholder-text="false">
    <div class="cmp-carousel__content" aria-atomic="false" aria-live="polite">
      <div id="carousel-c813aecaf1-item-29f3ed4bf5" class="cmp-carousel__item cmp-carousel__item--active" role="tabpanel" aria-roledescription="slide" aria-label="Slide 1 of 3" data-cmp-data-layer="{&quot;carousel-c813aecaf1-item-29f3ed4bf5&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:21Z&quot;,&quot;dc:title&quot;:&quot;Title&quot;}}" data-cmp-hook-carousel="item">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image.coreimg{.width}.jpeg/1550672497829/lava-into-ocean.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-title="Lava flowing into the ocean" id="image-29f3ed4bf5" data-cmp-data-layer="{&quot;image-29f3ed4bf5&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:21Z&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;0f54e1b5-535b-45f7-a46b-35abb19dd6bc&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image.coreimg.jpeg/1550672497829/lava-into-ocean.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Lava flowing into the ocean">
          </div>
        </div>
      </div>
      <div id="carousel-c813aecaf1-item-34fc86e545" class="cmp-carousel__item" role="tabpanel" aria-roledescription="slide" aria-label="Slide 2 of 3" data-cmp-data-layer="{&quot;carousel-c813aecaf1-item-34fc86e545&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:15Z&quot;}}" data-cmp-hook-carousel="item" aria-hidden="true">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1622336496.coreimg{.width}.jpeg/1550672497135/snowy-mountain-glacier.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-title="Snowy mountain glacier" id="image-34fc86e545" data-cmp-data-layer="{&quot;image-34fc86e545&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:15Z&quot;,&quot;dc:title&quot;:&quot;Snowy mountain glacier&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;45c6ee92-90e1-4af2-af69-b6dcbc7daeb7&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1622336496.coreimg.jpeg/1550672497135/snowy-mountain-glacier.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Snowy mountain glacier" title="Snowy mountain glacier">
            <meta itemprop="caption" content="Snowy mountain glacier">
          </div>
        </div>
      </div>
      <div id="carousel-c813aecaf1-item-d5ac18068a" class="cmp-carousel__item" role="tabpanel" aria-roledescription="slide" aria-label="Slide 3 of 3" data-cmp-data-layer="{&quot;carousel-c813aecaf1-item-d5ac18068a&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:05Z&quot;}}" data-cmp-hook-carousel="item" aria-hidden="true">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1533234440.coreimg{.width}.jpeg/1550672498426/lava-rock-formation.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-title="Gray lava rock formation" id="image-d5ac18068a" data-cmp-data-layer="{&quot;image-d5ac18068a&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:47:05Z&quot;,&quot;dc:title&quot;:&quot;Gray lava rock formation&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;c58c09f6-e382-4698-bfbd-e8c8d37712c8&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:38Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1533234440.coreimg.jpeg/1550672498426/lava-rock-formation.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Gray lava rock formation" title="Gray lava rock formation">
            <meta itemprop="caption" content="Gray lava rock formation">
          </div>
        </div>
      </div>
      <div class="cmp-carousel__actions">
        <button class="cmp-carousel__action cmp-carousel__action--previous" type="button" aria-label="Previous" data-cmp-hook-carousel="previous">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Previous</span>
        </button>
        <button class="cmp-carousel__action cmp-carousel__action--next" type="button" aria-label="Next" data-cmp-hook-carousel="next">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Next</span>
        </button>
      </div>
      <ol class="cmp-carousel__indicators" role="tablist" aria-label="Choose a slide to display" data-cmp-hook-carousel="indicators">
        <li class="cmp-carousel__indicator cmp-carousel__indicator--active" role="tab" aria-controls="carousel-c813aecaf1-item-0" aria-label="Slide 1" data-cmp-hook-carousel="indicator" aria-selected="true" tabindex="0">Title</li>
        <li class="cmp-carousel__indicator" role="tab" aria-controls="carousel-c813aecaf1-item-1" aria-label="Slide 2" data-cmp-hook-carousel="indicator" aria-selected="false" tabindex="-1"></li>
        <li class="cmp-carousel__indicator" role="tab" aria-controls="carousel-c813aecaf1-item-2" aria-label="Slide 3" data-cmp-hook-carousel="indicator" aria-selected="false" tabindex="-1"></li>
      </ol>
    </div>
  </div>
</div>
PostCSS: CSS: Title
Teaser Slides
Content

Carousel with three teaser components as child items.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
autopauseDisabled: false
delay: 5000
jcr:lastModified:
sling:resourceType: core-components-examples/components/carousel
autoplay: false
Markup:
<div class="carousel">
  <div id="carousel-82588fa1c7" class="cmp-carousel" role="group" aria-live="polite" aria-roledescription="carousel" data-cmp-delay="5000" data-cmp-data-layer="{&quot;carousel-82588fa1c7&quot;:{&quot;shownItems&quot;:[&quot;carousel-82588fa1c7-item-f9b21b552e&quot;],&quot;@type&quot;:&quot;core-components-examples/components/carousel&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T12:37:48Z&quot;}}" data-placeholder-text="false">
    <div class="cmp-carousel__content" aria-atomic="false" aria-live="polite">
      <div id="carousel-82588fa1c7-item-f9b21b552e" class="cmp-carousel__item cmp-carousel__item--active" role="tabpanel" aria-roledescription="slide" aria-label="Slide 1 of 3" data-cmp-data-layer="{&quot;carousel-82588fa1c7-item-f9b21b552e&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T12:37:05Z&quot;,&quot;dc:title&quot;:&quot;Teaser Title&quot;}}" data-cmp-hook-carousel="item">
        <div class="teaser">
          <div id="teaser-f9b21b552e" class="cmp-teaser" data-cmp-data-layer="{&quot;teaser-f9b21b552e&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/teaser&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T12:37:05Z&quot;,&quot;dc:title&quot;:&quot;First Teaser Title&quot;,&quot;dc:description&quot;:&quot;<p>Teaser Description</p>\r\n&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/container/carousel.html&quot;}}">
            <div class="cmp-teaser__image">
              <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_720124833.coreimg{.width}.jpeg/1550672497829/lava-into-ocean.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-title="Lava flowing into the ocean" id="image-f9b21b552e" data-cmp-data-layer="{&quot;image-f9b21b552e&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T12:37:05Z&quot;,&quot;dc:title&quot;:&quot;Lava flowing into the ocean&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/container/carousel.html&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;0f54e1b5-535b-45f7-a46b-35abb19dd6bc&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                <a class="cmp-image__link" href="/content/core-components-examples/library/container/carousel.html" data-cmp-clickable="" data-cmp-hook-image="link">
                  <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_720124833.coreimg.jpeg/1550672497829/lava-into-ocean.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Lava flowing into the ocean" title="Lava flowing into the ocean">
                </a>
                <meta itemprop="caption" content="Lava flowing into the ocean">
              </div>
            </div>
            <div class="cmp-teaser__content">
              <h2 class="cmp-teaser__title">
                <a class="cmp-teaser__title-link" href="/content/core-components-examples/library/container/carousel.html" data-cmp-clickable="">First Teaser Title</a>
              </h2>
              <div class="cmp-teaser__description">
                <p>Teaser Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="carousel-82588fa1c7-item-7cc66bb6ac" class="cmp-carousel__item" role="tabpanel" aria-roledescription="slide" aria-label="Slide 2 of 3" data-cmp-data-layer="{&quot;carousel-82588fa1c7-item-7cc66bb6ac&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T12:37:24Z&quot;,&quot;dc:title&quot;:&quot;Teaser Title&quot;}}" data-cmp-hook-carousel="item" aria-hidden="true">
        <div class="teaser">
          <div id="teaser-7cc66bb6ac" class="cmp-teaser" data-cmp-data-layer="{&quot;teaser-7cc66bb6ac&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/teaser&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T12:37:24Z&quot;,&quot;dc:title&quot;:&quot;Second Teaser Title&quot;,&quot;dc:description&quot;:&quot;<p>Teaser Description</p>\r\n&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/container/carousel.html&quot;}}">
            <div class="cmp-teaser__image">
              <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_841933659.coreimg{.width}.jpeg/1550672497135/snowy-mountain-glacier.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-title="Snowy mountain glacier" id="image-7cc66bb6ac" data-cmp-data-layer="{&quot;image-7cc66bb6ac&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T12:37:24Z&quot;,&quot;dc:title&quot;:&quot;Snowy mountain glacier&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/container/carousel.html&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;45c6ee92-90e1-4af2-af69-b6dcbc7daeb7&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                <a class="cmp-image__link" href="/content/core-components-examples/library/container/carousel.html" data-cmp-clickable="" data-cmp-hook-image="link">
                  <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_841933659.coreimg.jpeg/1550672497135/snowy-mountain-glacier.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Snowy mountain glacier" title="Snowy mountain glacier">
                </a>
                <meta itemprop="caption" content="Snowy mountain glacier">
              </div>
            </div>
            <div class="cmp-teaser__content">
              <h2 class="cmp-teaser__title">
                <a class="cmp-teaser__title-link" href="/content/core-components-examples/library/container/carousel.html" data-cmp-clickable="">Second Teaser Title</a>
              </h2>
              <div class="cmp-teaser__description">
                <p>Teaser Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="carousel-82588fa1c7-item-5c64a9c179" class="cmp-carousel__item" role="tabpanel" aria-roledescription="slide" aria-label="Slide 3 of 3" data-cmp-data-layer="{&quot;carousel-82588fa1c7-item-5c64a9c179&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T12:38:07Z&quot;,&quot;dc:title&quot;:&quot;Teaser Title&quot;}}" data-cmp-hook-carousel="item" aria-hidden="true">
        <div class="teaser">
          <div id="teaser-5c64a9c179" class="cmp-teaser" data-cmp-data-layer="{&quot;teaser-5c64a9c179&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/teaser&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T12:38:07Z&quot;,&quot;dc:title&quot;:&quot;Third Teaser Title&quot;,&quot;dc:description&quot;:&quot;<p>Teaser Description</p>\r\n&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/container/carousel.html&quot;}}">
            <div class="cmp-teaser__image">
              <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser.coreimg{.width}.jpeg/1550672498426/lava-rock-formation.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-title="Gray lava rock formation" id="image-5c64a9c179" data-cmp-data-layer="{&quot;image-5c64a9c179&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T12:38:07Z&quot;,&quot;dc:title&quot;:&quot;Gray lava rock formation&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/container/carousel.html&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;c58c09f6-e382-4698-bfbd-e8c8d37712c8&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:38Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                <a class="cmp-image__link" href="/content/core-components-examples/library/container/carousel.html" data-cmp-clickable="" data-cmp-hook-image="link">
                  <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser.coreimg.jpeg/1550672498426/lava-rock-formation.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Gray lava rock formation" title="Gray lava rock formation">
                </a>
                <meta itemprop="caption" content="Gray lava rock formation">
              </div>
            </div>
            <div class="cmp-teaser__content">
              <h2 class="cmp-teaser__title">
                <a class="cmp-teaser__title-link" href="/content/core-components-examples/library/container/carousel.html" data-cmp-clickable="">Third Teaser Title</a>
              </h2>
              <div class="cmp-teaser__description">
                <p>Teaser Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cmp-carousel__actions">
        <button class="cmp-carousel__action cmp-carousel__action--previous" type="button" aria-label="Previous" data-cmp-hook-carousel="previous">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Previous</span>
        </button>
        <button class="cmp-carousel__action cmp-carousel__action--next" type="button" aria-label="Next" data-cmp-hook-carousel="next">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Next</span>
        </button>
      </div>
      <ol class="cmp-carousel__indicators" role="tablist" aria-label="Choose a slide to display" data-cmp-hook-carousel="indicators">
        <li class="cmp-carousel__indicator cmp-carousel__indicator--active" role="tab" aria-controls="carousel-82588fa1c7-item-0" aria-label="Slide 1" data-cmp-hook-carousel="indicator" aria-selected="true" tabindex="0">Teaser Title</li>
        <li class="cmp-carousel__indicator" role="tab" aria-controls="carousel-82588fa1c7-item-1" aria-label="Slide 2" data-cmp-hook-carousel="indicator" aria-selected="false" tabindex="-1">Teaser Title</li>
        <li class="cmp-carousel__indicator" role="tab" aria-controls="carousel-82588fa1c7-item-2" aria-label="Slide 3" data-cmp-hook-carousel="indicator" aria-selected="false" tabindex="-1">Teaser Title</li>
      </ol>
    </div>
  </div>
</div>
JSON:
{"id":"carousel-82588fa1c7","autoplay":false,"delay":5000,"autopauseDisabled":false,":itemsOrder":["teaser_720124833","teaser_841933659","teaser"],":items":{"teaser_720124833":{"id":"teaser-f9b21b552e","title":"First Teaser Title","description":"<p>Teaser Description<\/p>\r\n","linkURL":"\/content\/core-components-examples\/library\/container\/carousel.html","actionsEnabled":false,"imageLinkHidden":false,"titleLinkHidden":false,"actions":[],"imagePath":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo\/component\/carousel_8337507762\/teaser_720124833.coreimg.jpeg\/1550672497829\/lava-into-ocean.jpeg",":type":"core-components-examples\/components\/teaser","dataLayer":{"teaser-f9b21b552e":{"@type":"core-components-examples\/components\/teaser","repo:modifyDate":"2019-01-22T12:37:05Z","dc:title":"First Teaser Title","dc:description":"<p>Teaser Description<\/p>\r\n","xdm:linkURL":"\/content\/core-components-examples\/library\/container\/carousel.html"}},"cq:panelTitle":"Teaser Title"},"teaser_841933659":{"id":"teaser-7cc66bb6ac","title":"Second Teaser Title","description":"<p>Teaser Description<\/p>\r\n","linkURL":"\/content\/core-components-examples\/library\/container\/carousel.html","actionsEnabled":false,"imageLinkHidden":false,"titleLinkHidden":false,"actions":[],"imagePath":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo\/component\/carousel_8337507762\/teaser_841933659.coreimg.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg",":type":"core-components-examples\/components\/teaser","dataLayer":{"teaser-7cc66bb6ac":{"@type":"core-components-examples\/components\/teaser","repo:modifyDate":"2019-01-22T12:37:24Z","dc:title":"Second Teaser Title","dc:description":"<p>Teaser Description<\/p>\r\n","xdm:linkURL":"\/content\/core-components-examples\/library\/container\/carousel.html"}},"cq:panelTitle":"Teaser Title"},"teaser":{"id":"teaser-5c64a9c179","title":"Third Teaser Title","description":"<p>Teaser Description<\/p>\r\n","linkURL":"\/content\/core-components-examples\/library\/container\/carousel.html","actionsEnabled":false,"imageLinkHidden":false,"titleLinkHidden":false,"actions":[],"imagePath":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo\/component\/carousel_8337507762\/teaser.coreimg.jpeg\/1550672498426\/lava-rock-formation.jpeg",":type":"core-components-examples\/components\/teaser","dataLayer":{"teaser-5c64a9c179":{"@type":"core-components-examples\/components\/teaser","repo:modifyDate":"2019-01-22T12:38:07Z","dc:title":"Third Teaser Title","dc:description":"<p>Teaser Description<\/p>\r\n","xdm:linkURL":"\/content\/core-components-examples\/library\/container\/carousel.html"}},"cq:panelTitle":"Teaser Title"}},"dataLayer":{"carousel-82588fa1c7":{"shownItems":["carousel-82588fa1c7-item-f9b21b552e"],"@type":"core-components-examples\/components\/carousel","repo:modifyDate":"2019-01-22T12:37:48Z"}},":type":"core-components-examples\/components\/carousel"}
PostCSS: CSS: Title
Automatic Transitioning
Content

Automatic transitioning of slides can be enabled. The delay before transitioning to the next slide is also configurable. Pause and play buttons are displayed which allow stopping / continuing slide rotation.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
autopauseDisabled: false
delay: 5000
jcr:lastModified:
sling:resourceType: core-components-examples/components/carousel
autoplay: true
Markup:
<div class="carousel">
  <div id="carousel-d602cb4093" class="cmp-carousel" role="group" aria-live="polite" aria-roledescription="carousel" data-cmp-autoplay="" data-cmp-delay="5000" data-cmp-data-layer="{&quot;carousel-d602cb4093&quot;:{&quot;shownItems&quot;:[&quot;carousel-d602cb4093-item-3946a406d0&quot;],&quot;@type&quot;:&quot;core-components-examples/components/carousel&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-14T20:10:38Z&quot;}}" data-placeholder-text="false">
    <div class="cmp-carousel__content" aria-atomic="false" aria-live="off">
      <div id="carousel-d602cb4093-item-3946a406d0" class="cmp-carousel__item cmp-carousel__item--active" role="tabpanel" aria-roledescription="slide" aria-label="Slide 1 of 3" data-cmp-data-layer="{&quot;carousel-d602cb4093-item-3946a406d0&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:01Z&quot;}}" data-cmp-hook-carousel="item">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_2104870554.coreimg{.width}.jpeg/1550672497829/lava-into-ocean.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-title="Lava flowing into the ocean" id="image-3946a406d0" data-cmp-data-layer="{&quot;image-3946a406d0&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:01Z&quot;,&quot;dc:title&quot;:&quot;Lava flowing into the ocean&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;0f54e1b5-535b-45f7-a46b-35abb19dd6bc&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_2104870554.coreimg.jpeg/1550672497829/lava-into-ocean.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Lava flowing into the ocean" title="Lava flowing into the ocean">
            <meta itemprop="caption" content="Lava flowing into the ocean">
          </div>
        </div>
      </div>
      <div id="carousel-d602cb4093-item-6cacfb6276" class="cmp-carousel__item" role="tabpanel" aria-roledescription="slide" aria-label="Slide 2 of 3" data-cmp-data-layer="{&quot;carousel-d602cb4093-item-6cacfb6276&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:06Z&quot;}}" data-cmp-hook-carousel="item" aria-hidden="true">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_1072016967.coreimg{.width}.jpeg/1550672497135/snowy-mountain-glacier.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-title="Snowy mountain glacier" id="image-6cacfb6276" data-cmp-data-layer="{&quot;image-6cacfb6276&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:06Z&quot;,&quot;dc:title&quot;:&quot;Snowy mountain glacier&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;45c6ee92-90e1-4af2-af69-b6dcbc7daeb7&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_1072016967.coreimg.jpeg/1550672497135/snowy-mountain-glacier.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Snowy mountain glacier" title="Snowy mountain glacier">
            <meta itemprop="caption" content="Snowy mountain glacier">
          </div>
        </div>
      </div>
      <div id="carousel-d602cb4093-item-c4cef25e5a" class="cmp-carousel__item" role="tabpanel" aria-roledescription="slide" aria-label="Slide 3 of 3" data-cmp-data-layer="{&quot;carousel-d602cb4093-item-c4cef25e5a&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:13Z&quot;}}" data-cmp-hook-carousel="item" aria-hidden="true">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image.coreimg{.width}.jpeg/1550672498426/lava-rock-formation.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-title="Gray lava rock formation" id="image-c4cef25e5a" data-cmp-data-layer="{&quot;image-c4cef25e5a&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:13Z&quot;,&quot;dc:title&quot;:&quot;Gray lava rock formation&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;c58c09f6-e382-4698-bfbd-e8c8d37712c8&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:38Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image.coreimg.jpeg/1550672498426/lava-rock-formation.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Gray lava rock formation" title="Gray lava rock formation">
            <meta itemprop="caption" content="Gray lava rock formation">
          </div>
        </div>
      </div>
      <div class="cmp-carousel__actions">
        <button class="cmp-carousel__action cmp-carousel__action--previous" type="button" aria-label="Previous" data-cmp-hook-carousel="previous">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Previous</span>
        </button>
        <button class="cmp-carousel__action cmp-carousel__action--next" type="button" aria-label="Next" data-cmp-hook-carousel="next">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Next</span>
        </button>
        <button class="cmp-carousel__action cmp-carousel__action--pause" type="button" aria-label="Pause" data-cmp-hook-carousel="pause">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Pause</span>
        </button>
        <button class="cmp-carousel__action cmp-carousel__action--play cmp-carousel__action--disabled" type="button" aria-label="Play" data-cmp-hook-carousel="play" disabled="">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Play</span>
        </button>
      </div>
      <ol class="cmp-carousel__indicators" role="tablist" aria-label="Choose a slide to display" data-cmp-hook-carousel="indicators">
        <li class="cmp-carousel__indicator cmp-carousel__indicator--active" role="tab" aria-controls="carousel-d602cb4093-item-0" aria-label="Slide 1" data-cmp-hook-carousel="indicator" aria-selected="true" tabindex="0"></li>
        <li class="cmp-carousel__indicator" role="tab" aria-controls="carousel-d602cb4093-item-1" aria-label="Slide 2" data-cmp-hook-carousel="indicator" aria-selected="false" tabindex="-1"></li>
        <li class="cmp-carousel__indicator" role="tab" aria-controls="carousel-d602cb4093-item-2" aria-label="Slide 3" data-cmp-hook-carousel="indicator" aria-selected="false" tabindex="-1"></li>
      </ol>
    </div>
  </div>
</div>
JSON:
{"id":"carousel-d602cb4093","autoplay":true,"delay":5000,"autopauseDisabled":false,":itemsOrder":["image_2104870554","image_1072016967","image"],":items":{"image_2104870554":{"id":"image-3946a406d0","alt":"Lava flowing into the ocean","title":"Lava flowing into the ocean","src":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_2135749087\/component\/carousel_7304850024\/image_2104870554.coreimg.jpeg\/1550672497829\/lava-into-ocean.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_2135749087\/component\/carousel_7304850024\/image_2104870554.coreimg{.width}.jpeg\/1550672497829\/lava-into-ocean.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-3946a406d0":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-06T18:48:01Z","dc:title":"Lava flowing into the ocean","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"2019-02-20T14:21:37Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-into-ocean.jpg","xdm:tags":[],"xdm:smartTags":[]}}},"cq:panelTitle":null},"image_1072016967":{"id":"image-6cacfb6276","alt":"Snowy mountain glacier","title":"Snowy mountain glacier","src":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_2135749087\/component\/carousel_7304850024\/image_1072016967.coreimg.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_2135749087\/component\/carousel_7304850024\/image_1072016967.coreimg{.width}.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-6cacfb6276":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-06T18:48:06Z","dc:title":"Snowy mountain glacier","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"2019-02-20T14:21:37Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/snowy-mountain-glacier.jpg","xdm:tags":[],"xdm:smartTags":[]}}},"cq:panelTitle":null},"image":{"id":"image-c4cef25e5a","alt":"Gray lava rock formation","title":"Gray lava rock formation","src":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_2135749087\/component\/carousel_7304850024\/image.coreimg.jpeg\/1550672498426\/lava-rock-formation.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_2135749087\/component\/carousel_7304850024\/image.coreimg{.width}.jpeg\/1550672498426\/lava-rock-formation.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"c58c09f6-e382-4698-bfbd-e8c8d37712c8","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-c4cef25e5a":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-06T18:48:13Z","dc:title":"Gray lava rock formation","image":{"repo:id":"c58c09f6-e382-4698-bfbd-e8c8d37712c8","repo:modifyDate":"2019-02-20T14:21:38Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-rock-formation.jpg","xdm:tags":[],"xdm:smartTags":[]}}},"cq:panelTitle":null}},"dataLayer":{"carousel-d602cb4093":{"shownItems":["carousel-d602cb4093-item-3946a406d0"],"@type":"core-components-examples\/components\/carousel","repo:modifyDate":"2019-01-14T20:10:38Z"}},":type":"core-components-examples\/components\/carousel"}
PostCSS: CSS: Title
Auto-pause on Hover Disabled
Content

The default behavior is to pause when hovering the carousel, and automatic transitioning is enabled. This can be disabled, which may be useful for certain use cases, such as a full screen carousel.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
autopauseDisabled: true
delay: 5000
jcr:lastModified:
sling:resourceType: core-components-examples/components/carousel
autoplay: true
Markup:
<div class="carousel">
  <div id="carousel-4879c671fd" class="cmp-carousel" role="group" aria-live="polite" aria-roledescription="carousel" data-cmp-autoplay="" data-cmp-delay="5000" data-cmp-autopause-disabled="" data-cmp-data-layer="{&quot;carousel-4879c671fd&quot;:{&quot;shownItems&quot;:[&quot;carousel-4879c671fd-item-43d0b6df1d&quot;],&quot;@type&quot;:&quot;core-components-examples/components/carousel&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-14T20:10:54Z&quot;}}" data-placeholder-text="false">
    <div class="cmp-carousel__content" aria-atomic="false" aria-live="off">
      <div id="carousel-4879c671fd-item-43d0b6df1d" class="cmp-carousel__item cmp-carousel__item--active" role="tabpanel" aria-roledescription="slide" aria-label="Slide 1 of 3" data-cmp-data-layer="{&quot;carousel-4879c671fd-item-43d0b6df1d&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:18Z&quot;}}" data-cmp-hook-carousel="item">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_436039984.coreimg{.width}.jpeg/1550672497829/lava-into-ocean.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-title="Lava flowing into the ocean" id="image-43d0b6df1d" data-cmp-data-layer="{&quot;image-43d0b6df1d&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:18Z&quot;,&quot;dc:title&quot;:&quot;Lava flowing into the ocean&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;0f54e1b5-535b-45f7-a46b-35abb19dd6bc&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_436039984.coreimg.jpeg/1550672497829/lava-into-ocean.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Lava flowing into the ocean" title="Lava flowing into the ocean">
            <meta itemprop="caption" content="Lava flowing into the ocean">
          </div>
        </div>
      </div>
      <div id="carousel-4879c671fd-item-85f0a1e104" class="cmp-carousel__item" role="tabpanel" aria-roledescription="slide" aria-label="Slide 2 of 3" data-cmp-data-layer="{&quot;carousel-4879c671fd-item-85f0a1e104&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:24Z&quot;}}" data-cmp-hook-carousel="item" aria-hidden="true">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_1321018784.coreimg{.width}.jpeg/1550672497135/snowy-mountain-glacier.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-title="Snowy mountain glacier" id="image-85f0a1e104" data-cmp-data-layer="{&quot;image-85f0a1e104&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:24Z&quot;,&quot;dc:title&quot;:&quot;Snowy mountain glacier&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;45c6ee92-90e1-4af2-af69-b6dcbc7daeb7&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_1321018784.coreimg.jpeg/1550672497135/snowy-mountain-glacier.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Snowy mountain glacier" title="Snowy mountain glacier">
            <meta itemprop="caption" content="Snowy mountain glacier">
          </div>
        </div>
      </div>
      <div id="carousel-4879c671fd-item-f03237c424" class="cmp-carousel__item" role="tabpanel" aria-roledescription="slide" aria-label="Slide 3 of 3" data-cmp-data-layer="{&quot;carousel-4879c671fd-item-f03237c424&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/carousel/item&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:29Z&quot;}}" data-cmp-hook-carousel="item" aria-hidden="true">
        <div class="image">
          <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image.coreimg{.width}.jpeg/1550672498426/lava-rock-formation.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-title="Gray lava rock formation" id="image-f03237c424" data-cmp-data-layer="{&quot;image-f03237c424&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-06T18:48:29Z&quot;,&quot;dc:title&quot;:&quot;Gray lava rock formation&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;c58c09f6-e382-4698-bfbd-e8c8d37712c8&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:38Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/core-components-examples/library/container/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image.coreimg.jpeg/1550672498426/lava-rock-formation.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Gray lava rock formation" title="Gray lava rock formation">
            <meta itemprop="caption" content="Gray lava rock formation">
          </div>
        </div>
      </div>
      <div class="cmp-carousel__actions">
        <button class="cmp-carousel__action cmp-carousel__action--previous" type="button" aria-label="Previous" data-cmp-hook-carousel="previous">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Previous</span>
        </button>
        <button class="cmp-carousel__action cmp-carousel__action--next" type="button" aria-label="Next" data-cmp-hook-carousel="next">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Next</span>
        </button>
        <button class="cmp-carousel__action cmp-carousel__action--pause" type="button" aria-label="Pause" data-cmp-hook-carousel="pause">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Pause</span>
        </button>
        <button class="cmp-carousel__action cmp-carousel__action--play cmp-carousel__action--disabled" type="button" aria-label="Play" data-cmp-hook-carousel="play" disabled="">
          <span class="cmp-carousel__action-icon"></span>
          <span class="cmp-carousel__action-text">Play</span>
        </button>
      </div>
      <ol class="cmp-carousel__indicators" role="tablist" aria-label="Choose a slide to display" data-cmp-hook-carousel="indicators">
        <li class="cmp-carousel__indicator cmp-carousel__indicator--active" role="tab" aria-controls="carousel-4879c671fd-item-0" aria-label="Slide 1" data-cmp-hook-carousel="indicator" aria-selected="true" tabindex="0"></li>
        <li class="cmp-carousel__indicator" role="tab" aria-controls="carousel-4879c671fd-item-1" aria-label="Slide 2" data-cmp-hook-carousel="indicator" aria-selected="false" tabindex="-1"></li>
        <li class="cmp-carousel__indicator" role="tab" aria-controls="carousel-4879c671fd-item-2" aria-label="Slide 3" data-cmp-hook-carousel="indicator" aria-selected="false" tabindex="-1"></li>
      </ol>
    </div>
  </div>
</div>
JSON:
{"id":"carousel-4879c671fd","autoplay":true,"delay":5000,"autopauseDisabled":true,":itemsOrder":["image_436039984","image_1321018784","image"],":items":{"image_436039984":{"id":"image-43d0b6df1d","alt":"Lava flowing into the ocean","title":"Lava flowing into the ocean","src":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_293658729\/component\/carousel_1655133361\/image_436039984.coreimg.jpeg\/1550672497829\/lava-into-ocean.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_293658729\/component\/carousel_1655133361\/image_436039984.coreimg{.width}.jpeg\/1550672497829\/lava-into-ocean.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-43d0b6df1d":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-06T18:48:18Z","dc:title":"Lava flowing into the ocean","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"2019-02-20T14:21:37Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-into-ocean.jpg","xdm:tags":[],"xdm:smartTags":[]}}},"cq:panelTitle":null},"image_1321018784":{"id":"image-85f0a1e104","alt":"Snowy mountain glacier","title":"Snowy mountain glacier","src":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_293658729\/component\/carousel_1655133361\/image_1321018784.coreimg.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_293658729\/component\/carousel_1655133361\/image_1321018784.coreimg{.width}.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-85f0a1e104":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-06T18:48:24Z","dc:title":"Snowy mountain glacier","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"2019-02-20T14:21:37Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/snowy-mountain-glacier.jpg","xdm:tags":[],"xdm:smartTags":[]}}},"cq:panelTitle":null},"image":{"id":"image-f03237c424","alt":"Gray lava rock formation","title":"Gray lava rock formation","src":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_293658729\/component\/carousel_1655133361\/image.coreimg.jpeg\/1550672498426\/lava-rock-formation.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/carousel\/_jcr_content\/root\/responsivegrid\/demo_293658729\/component\/carousel_1655133361\/image.coreimg{.width}.jpeg\/1550672498426\/lava-rock-formation.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"c58c09f6-e382-4698-bfbd-e8c8d37712c8","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-f03237c424":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-06T18:48:29Z","dc:title":"Gray lava rock formation","image":{"repo:id":"c58c09f6-e382-4698-bfbd-e8c8d37712c8","repo:modifyDate":"2019-02-20T14:21:38Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-rock-formation.jpg","xdm:tags":[],"xdm:smartTags":[]}}},"cq:panelTitle":null}},"dataLayer":{"carousel-4879c671fd":{"shownItems":["carousel-4879c671fd-item-43d0b6df1d"],"@type":"core-components-examples\/components\/carousel","repo:modifyDate":"2019-01-14T20:10:54Z"}},":type":"core-components-examples\/components\/carousel"}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *