Carousel

<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-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">Nullam sollicitudin suscipit diam, ac blandit ipsum tempor
                  consectetur</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-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">Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac
                  blandit ipsum tempor consectetur</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-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">Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac
                  blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies
                </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>