Carouselv1
Carousel allows a user to cycle through content panels. Slides of varying component type can be created.
Examples
Image Slides
Carousel with three image components as child items.
- Title
- Properties
- Markup
- JSON
- autopauseDisabled: false
- delay: 5000
- sling:resourceType: core-components-examples/components/carousel
- autoplay: false
<div class="carousel panelcontainer">
<div id="carousel-4e80c7e13c" class="cmp-carousel" role="group" aria-live="polite" aria-roledescription="carousel" data-cmp-is="carousel" data-cmp-delay="5000" data-cmp-data-layer="{"carousel-4e80c7e13c":{"shownItems":["carousel-4e80c7e13c-item-30704e84cd"],"@type":"core-components-examples/components/carousel"}}" data-placeholder-text="false">
<div class="cmp-carousel__content" aria-atomic="false" aria-live="polite">
<div id="carousel-4e80c7e13c-item-30704e84cd-tabpanel" class="cmp-carousel__item cmp-carousel__item--active" role="tabpanel" aria-labelledby="carousel-4e80c7e13c-item-30704e84cd-tab" aria-roledescription="slide" aria-label="Slide 1 of 3" data-cmp-data-layer="{"carousel-4e80c7e13c-item-30704e84cd":{"@type":"core-components-examples/components/carousel/item","dc:title":"Title"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image.coreimg.82{.width}.jpeg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" id="image-30704e84cd" data-cmp-data-layer="{"image-30704e84cd":{"@type":"core-components-examples/components/image","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Lava flowing into the ocean">
</div>
</div>
</div>
<div id="carousel-4e80c7e13c-item-645fc67b90-tabpanel" class="cmp-carousel__item" role="tabpanel" aria-labelledby="carousel-4e80c7e13c-item-645fc67b90-tab" aria-roledescription="slide" aria-label="Slide 2 of 3" data-cmp-data-layer="{"carousel-4e80c7e13c-item-645fc67b90":{"@type":"core-components-examples/components/carousel/item"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1622336496.coreimg.82{.width}.jpeg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" id="image-645fc67b90" data-cmp-data-layer="{"image-645fc67b90":{"@type":"core-components-examples/components/image","dc:title":"Snowy mountain glacier","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1622336496.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1622336496.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1622336496.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1622336496.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1622336496.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1622336496.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Snowy mountain glacier" title="Snowy mountain glacier">
<meta itemprop="caption" content="Snowy mountain glacier">
</div>
</div>
</div>
<div id="carousel-4e80c7e13c-item-85d21a3332-tabpanel" class="cmp-carousel__item" role="tabpanel" aria-labelledby="carousel-4e80c7e13c-item-85d21a3332-tab" aria-roledescription="slide" aria-label="Slide 3 of 3" data-cmp-data-layer="{"carousel-4e80c7e13c-item-85d21a3332":{"@type":"core-components-examples/components/carousel/item"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1533234440.coreimg.82{.width}.jpeg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" id="image-85d21a3332" data-cmp-data-layer="{"image-85d21a3332":{"@type":"core-components-examples/components/image","dc:title":"Gray lava rock formation","image":{"repo:id":"c58c09f6-e382-4698-bfbd-e8c8d37712c8","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1533234440.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1533234440.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1533234440.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1533234440.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1533234440.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_181646866/component/carousel/image_1533234440.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" 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 id="carousel-4e80c7e13c-item-30704e84cd-tab" class="cmp-carousel__indicator cmp-carousel__indicator--active" role="tab" aria-controls="carousel-4e80c7e13c-item-30704e84cd-tabpanel" aria-label="Slide 1" data-cmp-hook-carousel="indicator">Title</li>
<li id="carousel-4e80c7e13c-item-645fc67b90-tab" class="cmp-carousel__indicator" role="tab" aria-controls="carousel-4e80c7e13c-item-645fc67b90-tabpanel" aria-label="Slide 2" data-cmp-hook-carousel="indicator"></li>
<li id="carousel-4e80c7e13c-item-85d21a3332-tab" class="cmp-carousel__indicator" role="tab" aria-controls="carousel-4e80c7e13c-item-85d21a3332-tabpanel" aria-label="Slide 3" data-cmp-hook-carousel="indicator"></li>
</ol>
</div>
</div>
</div>
Teaser Slides
Carousel with three teaser components as child items.
- Teaser Title
- Teaser Title
- Teaser Title
- Properties
- Markup
- JSON
- autopauseDisabled: false
- delay: 5000
- sling:resourceType: core-components-examples/components/carousel
- autoplay: false
<div class="carousel panelcontainer">
<div id="carousel-bfe4fa6647" class="cmp-carousel" role="group" aria-live="polite" aria-roledescription="carousel" data-cmp-is="carousel" data-cmp-delay="5000" data-cmp-data-layer="{"carousel-bfe4fa6647":{"shownItems":["carousel-bfe4fa6647-item-1c0bc06021"],"@type":"core-components-examples/components/carousel"}}" data-placeholder-text="false">
<div class="cmp-carousel__content" aria-atomic="false" aria-live="polite">
<div id="carousel-bfe4fa6647-item-1c0bc06021-tabpanel" class="cmp-carousel__item cmp-carousel__item--active" role="tabpanel" aria-labelledby="carousel-bfe4fa6647-item-1c0bc06021-tab" aria-roledescription="slide" aria-label="Slide 1 of 3" data-cmp-data-layer="{"carousel-bfe4fa6647-item-1c0bc06021":{"@type":"core-components-examples/components/carousel/item","dc:title":"Teaser Title"}}" data-cmp-hook-carousel="item">
<div class="teaser">
<div id="teaser-1c0bc06021" class="cmp-teaser" data-cmp-data-layer="{"teaser-1c0bc06021":{"@type":"core-components-examples/components/teaser","dc:title":"First Teaser Title","dc:description":"<p>Teaser Description</p>","xdm:linkURL":"/content/core-components-examples/library/core-content/carousel.html"}}">
<a class="cmp-teaser__link" data-cmp-clickable="" href="/content/core-components-examples/library/core-content/carousel.html">
<div class="cmp-teaser__content">
<h2 class="cmp-teaser__title"> First Teaser Title </h2>
<div class="cmp-teaser__description">
<p>Teaser Description</p>
</div>
</div>
<div class="cmp-teaser__image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_720124833.coreimg.82{.width}.jpeg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" id="teaser-1c0bc06021-image" data-cmp-data-layer="{"teaser-1c0bc06021-image":{"@type":"core-components-examples/components/image","dc:title":"Lava flowing into the ocean","xdm:linkURL":"/content/core-components-examples/library/core-content/carousel.html","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_720124833.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_720124833.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_720124833.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_720124833.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_720124833.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_720124833.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Lava flowing into the ocean" title="Lava flowing into the ocean">
<meta itemprop="caption" content="Lava flowing into the ocean">
</div>
</div>
</a>
</div>
</div>
</div>
<div id="carousel-bfe4fa6647-item-47f1a7ca67-tabpanel" class="cmp-carousel__item" role="tabpanel" aria-labelledby="carousel-bfe4fa6647-item-47f1a7ca67-tab" aria-roledescription="slide" aria-label="Slide 2 of 3" data-cmp-data-layer="{"carousel-bfe4fa6647-item-47f1a7ca67":{"@type":"core-components-examples/components/carousel/item","dc:title":"Teaser Title"}}" data-cmp-hook-carousel="item">
<div class="teaser">
<div id="teaser-47f1a7ca67" class="cmp-teaser" data-cmp-data-layer="{"teaser-47f1a7ca67":{"@type":"core-components-examples/components/teaser","dc:title":"Second Teaser Title","dc:description":"<p>Teaser Description</p>","xdm:linkURL":"/content/core-components-examples/library/core-content/carousel.html"}}">
<a class="cmp-teaser__link" data-cmp-clickable="" href="/content/core-components-examples/library/core-content/carousel.html">
<div class="cmp-teaser__content">
<h2 class="cmp-teaser__title"> Second Teaser Title </h2>
<div class="cmp-teaser__description">
<p>Teaser Description</p>
</div>
</div>
<div class="cmp-teaser__image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_841933659.coreimg.82{.width}.jpeg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" id="teaser-47f1a7ca67-image" data-cmp-data-layer="{"teaser-47f1a7ca67-image":{"@type":"core-components-examples/components/image","dc:title":"Snowy mountain glacier","xdm:linkURL":"/content/core-components-examples/library/core-content/carousel.html","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_841933659.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_841933659.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_841933659.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_841933659.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_841933659.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser_841933659.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Snowy mountain glacier" title="Snowy mountain glacier">
<meta itemprop="caption" content="Snowy mountain glacier">
</div>
</div>
</a>
</div>
</div>
</div>
<div id="carousel-bfe4fa6647-item-43ec4c9761-tabpanel" class="cmp-carousel__item" role="tabpanel" aria-labelledby="carousel-bfe4fa6647-item-43ec4c9761-tab" aria-roledescription="slide" aria-label="Slide 3 of 3" data-cmp-data-layer="{"carousel-bfe4fa6647-item-43ec4c9761":{"@type":"core-components-examples/components/carousel/item","dc:title":"Teaser Title"}}" data-cmp-hook-carousel="item">
<div class="teaser">
<div id="teaser-43ec4c9761" class="cmp-teaser" data-cmp-data-layer="{"teaser-43ec4c9761":{"@type":"core-components-examples/components/teaser","dc:title":"Third Teaser Title","dc:description":"<p>Teaser Description</p>","xdm:linkURL":"/content/core-components-examples/library/core-content/carousel.html"}}">
<a class="cmp-teaser__link" data-cmp-clickable="" href="/content/core-components-examples/library/core-content/carousel.html">
<div class="cmp-teaser__content">
<h2 class="cmp-teaser__title"> Third Teaser Title </h2>
<div class="cmp-teaser__description">
<p>Teaser Description</p>
</div>
</div>
<div class="cmp-teaser__image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser.coreimg.82{.width}.jpeg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" id="teaser-43ec4c9761-image" data-cmp-data-layer="{"teaser-43ec4c9761-image":{"@type":"core-components-examples/components/image","dc:title":"Gray lava rock formation","xdm:linkURL":"/content/core-components-examples/library/core-content/carousel.html","image":{"repo:id":"c58c09f6-e382-4698-bfbd-e8c8d37712c8","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo/component/carousel_8337507762/teaser.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Gray lava rock formation" title="Gray lava rock formation">
<meta itemprop="caption" content="Gray lava rock formation">
</div>
</div>
</a>
</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 id="carousel-bfe4fa6647-item-1c0bc06021-tab" class="cmp-carousel__indicator cmp-carousel__indicator--active" role="tab" aria-controls="carousel-bfe4fa6647-item-1c0bc06021-tabpanel" aria-label="Slide 1" data-cmp-hook-carousel="indicator">Teaser Title</li>
<li id="carousel-bfe4fa6647-item-47f1a7ca67-tab" class="cmp-carousel__indicator" role="tab" aria-controls="carousel-bfe4fa6647-item-47f1a7ca67-tabpanel" aria-label="Slide 2" data-cmp-hook-carousel="indicator">Teaser Title</li>
<li id="carousel-bfe4fa6647-item-43ec4c9761-tab" class="cmp-carousel__indicator" role="tab" aria-controls="carousel-bfe4fa6647-item-43ec4c9761-tabpanel" aria-label="Slide 3" data-cmp-hook-carousel="indicator">Teaser Title</li>
</ol>
</div>
</div>
</div>
Automatic Transitioning
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.
Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
- Item 3.3
- Properties
- Markup
- JSON
- autopauseDisabled: false
- delay: 5000
- sling:resourceType: core-components-examples/components/carousel
- autoplay: true
<div class="carousel panelcontainer">
<div id="carousel-2834ca9044" class="cmp-carousel" role="group" aria-live="polite" aria-roledescription="carousel" data-cmp-is="carousel" data-cmp-autoplay="" data-cmp-delay="5000" data-cmp-data-layer="{"carousel-2834ca9044":{"shownItems":["carousel-2834ca9044-item-a97f4f0984"],"@type":"core-components-examples/components/carousel"}}" data-placeholder-text="false">
<div class="cmp-carousel__content" aria-atomic="false" aria-live="off">
<div id="carousel-2834ca9044-item-a97f4f0984-tabpanel" class="cmp-carousel__item cmp-carousel__item--active" role="tabpanel" aria-labelledby="carousel-2834ca9044-item-a97f4f0984-tab" aria-roledescription="slide" aria-label="Slide 1 of 4" data-cmp-data-layer="{"carousel-2834ca9044-item-a97f4f0984":{"@type":"core-components-examples/components/carousel/item"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_2104870554.coreimg.82{.width}.jpeg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" id="image-a97f4f0984" data-cmp-data-layer="{"image-a97f4f0984":{"@type":"core-components-examples/components/image","dc:title":"Lava flowing into the ocean","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_2104870554.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_2104870554.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_2104870554.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_2104870554.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_2104870554.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_2104870554.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" 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-2834ca9044-item-aa70d48c05-tabpanel" class="cmp-carousel__item" role="tabpanel" aria-labelledby="carousel-2834ca9044-item-aa70d48c05-tab" aria-roledescription="slide" aria-label="Slide 2 of 4" data-cmp-data-layer="{"carousel-2834ca9044-item-aa70d48c05":{"@type":"core-components-examples/components/carousel/item"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_1072016967.coreimg.82{.width}.jpeg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" id="image-aa70d48c05" data-cmp-data-layer="{"image-aa70d48c05":{"@type":"core-components-examples/components/image","dc:title":"Snowy mountain glacier","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_1072016967.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_1072016967.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_1072016967.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_1072016967.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_1072016967.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image_1072016967.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Snowy mountain glacier" title="Snowy mountain glacier">
<meta itemprop="caption" content="Snowy mountain glacier">
</div>
</div>
</div>
<div id="carousel-2834ca9044-item-fc12b5634b-tabpanel" class="cmp-carousel__item" role="tabpanel" aria-labelledby="carousel-2834ca9044-item-fc12b5634b-tab" aria-roledescription="slide" aria-label="Slide 3 of 4" data-cmp-data-layer="{"carousel-2834ca9044-item-fc12b5634b":{"@type":"core-components-examples/components/carousel/item"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image.coreimg.82{.width}.jpeg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" id="image-fc12b5634b" data-cmp-data-layer="{"image-fc12b5634b":{"@type":"core-components-examples/components/image","dc:title":"Gray lava rock formation","image":{"repo:id":"c58c09f6-e382-4698-bfbd-e8c8d37712c8","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/image.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Gray lava rock formation" title="Gray lava rock formation">
<meta itemprop="caption" content="Gray lava rock formation">
</div>
</div>
</div>
<div id="carousel-2834ca9044-item-f6197c7be6-tabpanel" class="cmp-carousel__item" role="tabpanel" aria-labelledby="carousel-2834ca9044-item-f6197c7be6-tab" aria-roledescription="slide" aria-label="Slide 4 of 4" data-cmp-data-layer="{"carousel-2834ca9044-item-f6197c7be6":{"@type":"core-components-examples/components/carousel/item","dc:title":"Item 3.3"}}" data-cmp-hook-carousel="item">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
<div class="image aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/item_331258757/image.coreimg.82{.width}.jpeg" data-asset-id="c0a39183-23f4-48f0-8db7-bb41ba2b0122" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg" id="image-662242c751" data-cmp-data-layer="{"image-662242c751":{"@type":"core-components-examples/components/image","dc:title":"Aerial photo of mountain range","image":{"repo:id":"c0a39183-23f4-48f0-8db7-bb41ba2b0122","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/item_331258757/image.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/item_331258757/image.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/item_331258757/image.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/item_331258757/image.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/item_331258757/image.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_2135749087/component/carousel_7304850024/item_331258757/image.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Aerial photo of mountain range" title="Aerial photo of mountain range">
<meta itemprop="caption" content="Aerial photo of mountain range">
</div>
</div>
<div class="text aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0">
<div data-cmp-data-layer="{"123":{"@type":"core-components-examples/components/text","xdm:text":"<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>"}}" id="123" class="cmp-text">
<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</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>
<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">
<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 id="carousel-2834ca9044-item-a97f4f0984-tab" class="cmp-carousel__indicator cmp-carousel__indicator--active" role="tab" aria-controls="carousel-2834ca9044-item-a97f4f0984-tabpanel" aria-label="Slide 1" data-cmp-hook-carousel="indicator"></li>
<li id="carousel-2834ca9044-item-aa70d48c05-tab" class="cmp-carousel__indicator" role="tab" aria-controls="carousel-2834ca9044-item-aa70d48c05-tabpanel" aria-label="Slide 2" data-cmp-hook-carousel="indicator"></li>
<li id="carousel-2834ca9044-item-fc12b5634b-tab" class="cmp-carousel__indicator" role="tab" aria-controls="carousel-2834ca9044-item-fc12b5634b-tabpanel" aria-label="Slide 3" data-cmp-hook-carousel="indicator"></li>
<li id="carousel-2834ca9044-item-f6197c7be6-tab" class="cmp-carousel__indicator" role="tab" aria-controls="carousel-2834ca9044-item-f6197c7be6-tabpanel" aria-label="Slide 4" data-cmp-hook-carousel="indicator">Item 3.3</li>
</ol>
</div>
</div>
</div>
Auto-pause on Hover Disabled
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.
- Properties
- Markup
- JSON
- autopauseDisabled: true
- delay: 5000
- sling:resourceType: core-components-examples/components/carousel
- autoplay: true
<div class="carousel panelcontainer">
<div id="carousel-6c3377e03b" class="cmp-carousel" role="group" aria-live="polite" aria-roledescription="carousel" data-cmp-is="carousel" data-cmp-autoplay="" data-cmp-delay="5000" data-cmp-autopause-disabled="" data-cmp-data-layer="{"carousel-6c3377e03b":{"shownItems":["carousel-6c3377e03b-item-3c3fc08648"],"@type":"core-components-examples/components/carousel"}}" data-placeholder-text="false">
<div class="cmp-carousel__content" aria-atomic="false" aria-live="off">
<div id="carousel-6c3377e03b-item-3c3fc08648-tabpanel" class="cmp-carousel__item cmp-carousel__item--active" role="tabpanel" aria-labelledby="carousel-6c3377e03b-item-3c3fc08648-tab" aria-roledescription="slide" aria-label="Slide 1 of 3" data-cmp-data-layer="{"carousel-6c3377e03b-item-3c3fc08648":{"@type":"core-components-examples/components/carousel/item"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_436039984.coreimg.82{.width}.jpeg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" id="image-3c3fc08648" data-cmp-data-layer="{"image-3c3fc08648":{"@type":"core-components-examples/components/image","dc:title":"Lava flowing into the ocean","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_436039984.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_436039984.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_436039984.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_436039984.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_436039984.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_436039984.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" 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-6c3377e03b-item-feffc20a15-tabpanel" class="cmp-carousel__item" role="tabpanel" aria-labelledby="carousel-6c3377e03b-item-feffc20a15-tab" aria-roledescription="slide" aria-label="Slide 2 of 3" data-cmp-data-layer="{"carousel-6c3377e03b-item-feffc20a15":{"@type":"core-components-examples/components/carousel/item"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_1321018784.coreimg.82{.width}.jpeg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" id="image-feffc20a15" data-cmp-data-layer="{"image-feffc20a15":{"@type":"core-components-examples/components/image","dc:title":"Snowy mountain glacier","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_1321018784.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_1321018784.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_1321018784.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_1321018784.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_1321018784.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image_1321018784.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Snowy mountain glacier" title="Snowy mountain glacier">
<meta itemprop="caption" content="Snowy mountain glacier">
</div>
</div>
</div>
<div id="carousel-6c3377e03b-item-cf5244aa7d-tabpanel" class="cmp-carousel__item" role="tabpanel" aria-labelledby="carousel-6c3377e03b-item-cf5244aa7d-tab" aria-roledescription="slide" aria-label="Slide 3 of 3" data-cmp-data-layer="{"carousel-6c3377e03b-item-cf5244aa7d":{"@type":"core-components-examples/components/carousel/item"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image.coreimg.82{.width}.jpeg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" id="image-cf5244aa7d" data-cmp-data-layer="{"image-cf5244aa7d":{"@type":"core-components-examples/components/image","dc:title":"Gray lava rock formation","image":{"repo:id":"c58c09f6-e382-4698-bfbd-e8c8d37712c8","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_293658729/component/carousel_1655133361/image.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" 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">
<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 id="carousel-6c3377e03b-item-3c3fc08648-tab" class="cmp-carousel__indicator cmp-carousel__indicator--active" role="tab" aria-controls="carousel-6c3377e03b-item-3c3fc08648-tabpanel" aria-label="Slide 1" data-cmp-hook-carousel="indicator"></li>
<li id="carousel-6c3377e03b-item-feffc20a15-tab" class="cmp-carousel__indicator" role="tab" aria-controls="carousel-6c3377e03b-item-feffc20a15-tabpanel" aria-label="Slide 2" data-cmp-hook-carousel="indicator"></li>
<li id="carousel-6c3377e03b-item-cf5244aa7d-tab" class="cmp-carousel__indicator" role="tab" aria-controls="carousel-6c3377e03b-item-cf5244aa7d-tabpanel" aria-label="Slide 3" data-cmp-hook-carousel="indicator"></li>
</ol>
</div>
</div>
</div>
Default Active Item
Carousel with three images with the default active item being the second image.
- Properties
- Markup
- JSON
- sling:resourceType: core-components-examples/components/carousel
- activeItem: image_1321018784
<div class="carousel panelcontainer">
<div id="carousel-b369b51f5f" class="cmp-carousel" role="group" aria-live="polite" aria-roledescription="carousel" data-cmp-is="carousel" data-cmp-delay="5000" data-cmp-data-layer="{"carousel-b369b51f5f":{"shownItems":["carousel-b369b51f5f-item-3635ffd20a"],"@type":"core-components-examples/components/carousel"}}" data-placeholder-text="false">
<div class="cmp-carousel__content" aria-atomic="false" aria-live="polite">
<div id="carousel-b369b51f5f-item-6f47228b05-tabpanel" class="cmp-carousel__item" role="tabpanel" aria-labelledby="carousel-b369b51f5f-item-6f47228b05-tab" aria-roledescription="slide" aria-label="Slide 1 of 3" data-cmp-data-layer="{"carousel-b369b51f5f-item-6f47228b05":{"@type":"core-components-examples/components/carousel/item"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_436039984.coreimg.82{.width}.jpeg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" id="image-6f47228b05" data-cmp-data-layer="{"image-6f47228b05":{"@type":"core-components-examples/components/image","dc:title":"Lava flowing into the ocean","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_436039984.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_436039984.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_436039984.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_436039984.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_436039984.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_436039984.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" 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-b369b51f5f-item-3635ffd20a-tabpanel" class="cmp-carousel__item cmp-carousel__item--active" role="tabpanel" aria-labelledby="carousel-b369b51f5f-item-3635ffd20a-tab" aria-roledescription="slide" aria-label="Slide 2 of 3" data-cmp-data-layer="{"carousel-b369b51f5f-item-3635ffd20a":{"@type":"core-components-examples/components/carousel/item"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_1321018784.coreimg.82{.width}.jpeg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" id="image-3635ffd20a" data-cmp-data-layer="{"image-3635ffd20a":{"@type":"core-components-examples/components/image","dc:title":"Snowy mountain glacier","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_1321018784.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_1321018784.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_1321018784.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_1321018784.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_1321018784.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image_1321018784.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Snowy mountain glacier" title="Snowy mountain glacier">
<meta itemprop="caption" content="Snowy mountain glacier">
</div>
</div>
</div>
<div id="carousel-b369b51f5f-item-fb75dafde2-tabpanel" class="cmp-carousel__item" role="tabpanel" aria-labelledby="carousel-b369b51f5f-item-fb75dafde2-tab" aria-roledescription="slide" aria-label="Slide 3 of 3" data-cmp-data-layer="{"carousel-b369b51f5f-item-fb75dafde2":{"@type":"core-components-examples/components/carousel/item"}}" data-cmp-hook-carousel="item">
<div class="image">
<div data-cmp-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image.coreimg.82{.width}.jpeg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" id="image-fb75dafde2" data-cmp-data-layer="{"image-fb75dafde2":{"@type":"core-components-examples/components/image","dc:title":"Gray lava rock formation","image":{"repo:id":"c58c09f6-e382-4698-bfbd-e8c8d37712c8","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/carousel/_jcr_content/root/responsivegrid/demo_activeitem/component/carousel_1655133361/image.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" 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 id="carousel-b369b51f5f-item-6f47228b05-tab" class="cmp-carousel__indicator" role="tab" aria-controls="carousel-b369b51f5f-item-6f47228b05-tabpanel" aria-label="Slide 1" data-cmp-hook-carousel="indicator"></li>
<li id="carousel-b369b51f5f-item-3635ffd20a-tab" class="cmp-carousel__indicator cmp-carousel__indicator--active" role="tab" aria-controls="carousel-b369b51f5f-item-3635ffd20a-tabpanel" aria-label="Slide 2" data-cmp-hook-carousel="indicator"></li>
<li id="carousel-b369b51f5f-item-fb75dafde2-tab" class="cmp-carousel__indicator" role="tab" aria-controls="carousel-b369b51f5f-item-fb75dafde2-tabpanel" aria-label="Slide 3" data-cmp-hook-carousel="indicator"></li>
</ol>
</div>
</div>
</div>
Deep Linking
Linking to a carousel item displays the item and scrolls to it.
Built with Core Components 2.28.0.