Carousel

<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--tertiary 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="/dist/media/icons.e3d8f25c.svg#play-outline"></use>
            </svg></span></button><button
          class="ecl-button ecl-button--tertiary 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="/dist/media/icons.e3d8f25c.svg#pause-outline"></use>
            </svg></span></button></div>
      <div class="ecl-carousel__navigation" role="tablist"><button
          class="ecl-button ecl-button--tertiary ecl-carousel__navigation-item" role="tab">
          1
        </button><button class="ecl-button ecl-button--tertiary ecl-carousel__navigation-item" role="tab">
          2
        </button><button class="ecl-button ecl-button--tertiary ecl-carousel__navigation-item" role="tab">
          3
        </button></div>
    </div>
  </div>
  <div class="ecl-carousel__container">
    <div class="ecl-carousel__slides">
      <div class="ecl-carousel__slide" role="tabpanel" aria-label="slide 1 of 3" aria-roledescription="slide">
        <section
          class="ecl-banner ecl-banner--m ecl-banner--font-m ecl-banner--box-bg-light ecl-banner--color-dark ecl-banner--h-left ecl-banner--v-center"
          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" data-ecl-banner-footer>
              <div class="ecl-container">© Copyright or credit</div>
            </footer>
          </figure>
          <div class="ecl-container ecl-banner__info">
            <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="/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="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </section>
      </div>
      <div class="ecl-carousel__slide" role="tabpanel" aria-label="slide 2 of 3" aria-roledescription="slide">
        <section
          class="ecl-banner ecl-banner--m ecl-banner--font-m ecl-banner--box-bg-dark ecl-banner--color-light ecl-banner--h-left ecl-banner--v-center"
          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" data-ecl-banner-footer>
              <div class="ecl-container">© Copyright or credit</div>
            </footer>
          </figure>
          <div class="ecl-container ecl-banner__info">
            <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="/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="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </section>
      </div>
      <div class="ecl-carousel__slide" role="tabpanel" aria-label="slide 3 of 3" aria-roledescription="slide">
        <section
          class="ecl-banner ecl-banner--m ecl-banner--font-m ecl-banner--box-bg-dark ecl-banner--color-light ecl-banner--h-left ecl-banner--v-center"
          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" data-ecl-banner-footer>
              <div class="ecl-container">© Copyright or credit</div>
            </footer>
          </figure>
          <div class="ecl-container ecl-banner__info">
            <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="/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="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</section>