Carousel

Carousel (Multi-slide)
No select match
Quick Options
Source code (HTML)
<div class="mx-6 esl-carousel-nav-container">
  <button type="button" class="esl-carousel-arrow prev hide-xs" esl-carousel-nav="group:prev"><span class="sr-only">Previous Slide</span></button>

  <esl-carousel demo-options-target="" esl-carousel-touch="" esl-carousel-keyboard="" tabindex="0" media="@XS|@SM|@MD|@LG|@XL" count="1|2|3|4|5" loop="true" container="::parent(div)" container-incomplete-class="!carousel-filled">
    <ul esl-carousel-slides="">
      
        <li esl-carousel-slide="" active="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 1" src="/assets/carousel/1-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 1</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 2" src="/assets/carousel/2-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 2</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 3" src="/assets/carousel/3-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 3</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 4" src="/assets/carousel/4-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 4</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 5" src="/assets/carousel/5-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 5</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 6" src="/assets/carousel/6-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 6</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 7" src="/assets/carousel/7-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 7</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 8" src="/assets/carousel/8-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 8</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 9" src="/assets/carousel/9-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 9</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 10" src="/assets/carousel/10-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 10</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 11" src="/assets/carousel/11-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 11</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 12" src="/assets/carousel/12-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 12</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 13" src="/assets/carousel/13-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 13</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 14" src="/assets/carousel/14-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 14</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 15" src="/assets/carousel/15-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 15</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
        <li esl-carousel-slide="">
          <div class="card">
            <div class="card-image img-container img-container-16-9" esl-image-container="">
              <img class="img-fade img-cover" alt="Carousel slide 16" src="/assets/carousel/16-sm.jpg" loading="lazy">
              <button type="button" class="close close-icon close-remove inverse" title="Remove" aria-label="Remove" onclick="this.closest('li').remove()"></button>
            </div>
            <div class="card-content p-3">
              <h5>Item 16</h5>
              <p><!-- text 20 --></p>
              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
            </div>
          </div>
        </li>
      
    </ul>
  </esl-carousel>

  <button type="button" class="esl-carousel-arrow next hide-xs" esl-carousel-nav="group:next"><span class="sr-only">Next Slide</span></button>
</div>
<esl-carousel-dots class="carousel-dots-wrapper" target="::prev::child(esl-carousel)" tabindex="0"></esl-carousel-dots>
Source code (JS)
import {ESLCarousel} from '@exadel/esl';
ESLCarousel.register();