<div class="ecl-carousel" data-ecl-auto-init="Carousel">
<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">
<section class="ecl-banner ecl-banner--text-box ecl-banner--m">
<div class="ecl-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-banner__credit">© Copyright or credit</div>
<div class="ecl-container">
<div class="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="/example"
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-banner__link-cta"
aria-label="Subscribe"><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="/dist/media/icons.6770a2ae.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">
<section class="ecl-banner ecl-banner--text-highlight ecl-banner--m">
<div class="ecl-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-banner__credit">© Copyright or credit</div>
<div class="ecl-container">
<div class="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="/example"
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-banner__link-cta"
aria-label="Subscribe"><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="/dist/media/icons.6770a2ae.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">
<section class="ecl-banner ecl-banner--image-overlay ecl-banner--m">
<div class="ecl-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-banner__credit">© Copyright or credit</div>
<div class="ecl-container">
<div class="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="/example"
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-banner__link-cta"
aria-label="Subscribe"><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="/dist/media/icons.6770a2ae.svg#corner-arrow"></use>
</svg></a></div>
</div>
</div>
</div>
</section>
</div>
</div>
</div><button class="ecl-carousel__prev"><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-270 ecl-icon--inverted ecl-carousel__icon-default" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#corner-arrow"></use>
</svg><span class="ecl-u-sr-only">Previous slides</span></button><button class="ecl-carousel__next"><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-icon--inverted ecl-carousel__icon-default" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#corner-arrow"></use>
</svg><span class="ecl-u-sr-only">Next slides</span></button>
<div class="ecl-carousel__controls">
<div class="ecl-container">
<div class="ecl-carousel__autoplay"><button class="ecl-carousel__play"><svg
class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-carousel__icon-default" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#play"></use>
</svg><svg class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-carousel__icon-active" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#play-filled"></use>
</svg><span class="ecl-u-sr-only">Play carousel</span></button><button class="ecl-carousel__pause"><svg
class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-carousel__icon-default" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#pause"></use>
</svg><svg class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-carousel__icon-active" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#pause-filled"></use>
</svg><span class="ecl-u-sr-only">Pause carousel</span></button></div>
<div class="ecl-carousel__navigation"><button class="ecl-carousel__navigation-item"><span class="ecl-u-sr-only">Go
to slide 1</span></button><button class="ecl-carousel__navigation-item"><span class="ecl-u-sr-only">Go to
slide 2</span></button><button class="ecl-carousel__navigation-item"><span class="ecl-u-sr-only">Go to slide
3</span></button></div>
<div class="ecl-carousel__pagination"><span class="ecl-carousel__current">1</span> of <span
class="ecl-carousel__max">3</span></div>
</div>
</div>
</div>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.