<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-page-banner ecl-page-banner--image">
<div class="ecl-page-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-page-banner__credit">© Copyright or credit</div>
<div class="ecl-container">
<div class="ecl-page-banner__container">
<div class="ecl-page-banner__content">
<div class="ecl-page-banner__title">Lorem ipsum dolor sit amet</div>
<p class="ecl-page-banner__description"><span class="ecl-page-banner__description-text">Nullam
sollicitudin suscipit diam, ac blandit ipsum tempor consectetur</span></p>
<div class="ecl-page-banner__cta"><a href="/example"
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-page-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.cec58484.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-page-banner ecl-page-banner--image-gradient">
<div class="ecl-page-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-page-banner__credit">© Copyright or credit</div>
<div class="ecl-container">
<div class="ecl-page-banner__container">
<div class="ecl-page-banner__content">
<div class="ecl-page-banner__title">Duis vitae pulvinar turpis</div>
<p class="ecl-page-banner__description"><span class="ecl-page-banner__description-text">Integer quis
lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur</span></p>
<div class="ecl-page-banner__cta"><a href="/example"
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-page-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.cec58484.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-page-banner ecl-page-banner--image-shade">
<div class="ecl-page-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-page-banner__credit">© Copyright or credit</div>
<div class="ecl-container">
<div class="ecl-page-banner__container">
<div class="ecl-page-banner__content">
<div class="ecl-page-banner__title">Donec maximus pharetra ex a ultricies</div>
<p class="ecl-page-banner__description"><span class="ecl-page-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-page-banner__cta"><a href="/example"
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-page-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.cec58484.svg#corner-arrow"></use>
</svg></a></div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="ecl-carousel__controls"><button class="ecl-carousel__prev"><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-270 ecl-icon--inverted ecl-u-d-block" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.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-u-d-block" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg><span class="ecl-u-sr-only">Next slides</span></button>
<div class="ecl-container"><button class="ecl-carousel__toggle"><svg class="ecl-icon ecl-icon--l ecl-icon--inverted"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#pause"></use>
</svg><span class="ecl-u-sr-only">Carousel auto play</span></button>
<div class="ecl-carousel__pagination"><span class="ecl-carousel__current">1</span> of <span
class="ecl-carousel__max">3</span></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>
</div>
</div>Try it yourself on the playground
Playground