Carousel
-
Item 1
Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim.
-
Item 2
Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim.
-
Item 3
Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim.
-
Item 4
Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim.
No select match
Quick Options
<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>
import {ESLCarousel} from '@exadel/esl'; ESLCarousel.register();