<section class="ecl-carousel" data-ecl-auto-init="Carousel" aria-roledescription="carousel" aria-label="Carousel description here"> <div class="ecl-carousel__controls"> <div class="ecl-container"> <div class="ecl-carousel__autoplay"><button class="ecl-button ecl-button--ghost ecl-carousel__play ecl-button--icon-only" type="button"><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Play carousel</span><svg class="ecl-icon ecl-icon--m ecl-button__icon ecl-carousel__icon-default" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#play"></use> </svg></span></button><button class="ecl-button ecl-button--ghost ecl-carousel__pause ecl-button--icon-only" type="button"><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Pause carousel</span><svg class="ecl-icon ecl-icon--m ecl-button__icon ecl-carousel__icon-default" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#pause"></use> </svg></span></button></div> <div class="ecl-carousel__navigation"><button class="ecl-button ecl-button--ghost ecl-carousel__navigation-item"> 1 </button><button class="ecl-button ecl-button--ghost ecl-carousel__navigation-item"> 2 </button><button class="ecl-button ecl-button--ghost ecl-carousel__navigation-item"> 3 </button></div> </div> </div><button class="ecl-button ecl-button--ghost ecl-carousel__prev ecl-button--icon-only" type="button"><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Previous slides</span><svg class="ecl-icon ecl-icon--m ecl-icon--rotate-270 ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#corner-arrow"></use> </svg></span></button> <div class="ecl-carousel__container"> <div class="ecl-carousel__slides" id="ecl-carousel-slider"> <div class="ecl-carousel__slide" role="group" aria-label="slide 1 of 3" aria-roledescription="slide"> <section class="ecl-banner ecl-banner--text-box ecl-banner--m" data-ecl-banner data-ecl-auto-init="Banner"> <figure class="ecl-banner__picture-container"> <picture class="ecl-picture ecl-banner__picture" data-ecl-banner-image><img class="ecl-banner__image" src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Alternative text" /> </picture> <footer class="ecl-banner__credit"><small>© Copyright or credit</small></footer> </figure> <div class="ecl-container"> <div class="ecl-banner__container" data-ecl-banner-container> <div class="ecl-banner__content"> <div class="ecl-banner__title"><span class="ecl-banner__title-text">Lorem ipsum dolor sit amet</span> </div> <p class="ecl-banner__description"><span class="ecl-banner__description-text">Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur</span></p> <div class="ecl-banner__cta"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--cta ecl-link--icon ecl-banner__link-cta"><span class="ecl-link__label">Subscribe</span><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#corner-arrow"> </use> </svg></a></div> </div> </div> </div> </section> </div> <div class="ecl-carousel__slide" role="group" aria-label="slide 2 of 3" aria-roledescription="slide"> <section class="ecl-banner ecl-banner--text-overlay ecl-banner--m" data-ecl-banner data-ecl-auto-init="Banner"> <figure class="ecl-banner__picture-container"> <picture class="ecl-picture ecl-banner__picture" data-ecl-banner-image><img class="ecl-banner__image" src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Alternative text" /> </picture> <footer class="ecl-banner__credit"><small>© Copyright or credit</small></footer> </figure> <div class="ecl-container"> <div class="ecl-banner__container" data-ecl-banner-container> <div class="ecl-banner__content"> <div class="ecl-banner__title"><span class="ecl-banner__title-text">Duis vitae pulvinar turpis</span> </div> <p class="ecl-banner__description"><span class="ecl-banner__description-text">Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur</span></p> <div class="ecl-banner__cta"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--cta ecl-link--icon ecl-banner__link-cta"><span class="ecl-link__label">Subscribe</span><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#corner-arrow"> </use> </svg></a></div> </div> </div> </div> </section> </div> <div class="ecl-carousel__slide" role="group" aria-label="slide 3 of 3" aria-roledescription="slide"> <section class="ecl-banner ecl-banner--text-overlay ecl-banner--m" data-ecl-banner data-ecl-auto-init="Banner"> <figure class="ecl-banner__picture-container"> <picture class="ecl-picture ecl-banner__picture" data-ecl-banner-image><img class="ecl-banner__image" src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Alternative text" /> </picture> <footer class="ecl-banner__credit"><small>© Copyright or credit</small></footer> </figure> <div class="ecl-container"> <div class="ecl-banner__container" data-ecl-banner-container> <div class="ecl-banner__content"> <div class="ecl-banner__title"><span class="ecl-banner__title-text">Donec maximus pharetra ex a ultricies</span></div> <p class="ecl-banner__description"><span class="ecl-banner__description-text">Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies</span></p> <div class="ecl-banner__cta"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--cta ecl-link--icon ecl-banner__link-cta"><span class="ecl-link__label">Subscribe</span><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#corner-arrow"> </use> </svg></a></div> </div> </div> </div> </section> </div> </div> </div><button class="ecl-button ecl-button--ghost ecl-carousel__next ecl-button--icon-only" type="button"><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Next slides</span><svg class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#corner-arrow"></use> </svg></span></button> </section>
Try it yourself on the playground
PlaygroundOther sizes
Carousel can also be displayed with small or large sizes, by using corresponding sizes for the banners. You can find examples on the playground.