Carousel

Carousel Component is useful to navigate through a collection of images in a sequential fashion, moving to the previous/next one through the arrows on the sides. Tailbreeze uses Embla Carousel to meet all of its carousel requirements.

Official documentation: https://github.com/davidjerleke/embla-carousel

Basic example

Carousel Component is useful to navigate through a collection of images in a sequential fashion, moving to the previous/next one through the arrows on the sides.

Basic example 
<div class="carousel">
    <div class="carousel-inner">
        <div class="carousel-slide"><img src="../assets/img/gallery/19.jpg" alt="" /></div>
        <div class="carousel-slide"><img src="../assets/img/gallery/18.jpg" alt="" /></div>
        <div class="carousel-slide"><img src="../assets/img/gallery/16.jpg" alt="" /></div>
        <div class="carousel-slide"><img src="../assets/img/gallery/11.jpg" alt="" /></div>
        <div class="carousel-slide"><img src="../assets/img/gallery/9.jpg" alt="" /></div>
        <div class="carousel-slide"><img src="../assets/img/gallery/1.jpg" alt="" /></div>
    </div>
    <button type="button" class="carousel-prev icon">
        west
        <span class="sr-only">Previous</span>
    </button>
    <button type="button" class="carousel-next icon">
        east
        <span class="sr-only">Next</span>
    </button>
</div>

Caption and Indicators

Make the carousel more attractive by adding captions and indicators.

Caption and Indicators 
<div class="carousel">
    <div class="carousel-inner">
        <div class="carousel-slide">
            <img src="../assets/img/gallery/5.jpg" alt="" />
            <div class="carousel-caption drop-shadow-sm">
                <h4 class="mb-1 text-lg font-bold leading-none">First slide label</h4>
                <div class="text-sm">Elit anim anim culpa commodo deserunt</div>
            </div>
        </div>
        <div class="carousel-slide">
            <img src="../assets/img/gallery/6.jpg" alt="" />
            <div class="carousel-caption drop-shadow-sm">
                <h4 class="mb-1 text-lg font-bold leading-none">Second slide label</h4>
                <div class="text-sm">Quis laboris dolor consectetur occaecat</div>
            </div>
        </div>
        <div class="carousel-slide">
            <img src="../assets/img/gallery/11.jpg" alt="" />
            <div class="carousel-caption drop-shadow-sm">
                <h4 class="mb-1 text-lg font-bold leading-none">Third third label</h4>
                <div class="text-sm">Velit voluptate nulla ex enim et esse</div>
            </div>
        </div>
        <div class="carousel-slide">
            <div class="carousel-caption drop-shadow-sm">
                <h4 class="mb-1 text-lg font-bold leading-none">Fourth slide label</h4>
                <div class="text-sm">Fugiat anim laboris anim laboris aliquip</div>
            </div>
            <img src="../assets/img/gallery/13.jpg" alt="" />
        </div>
        <div class="carousel-slide">
            <div class="carousel-caption drop-shadow-sm">
                <h4 class="mb-1 text-lg font-bold leading-none">Fifth slide label</h4>
                <div class="text-sm">Incididunt cillum pariatur laborum aliquip Lorem</div>
            </div>
            <img src="../assets/img/gallery/19.jpg" alt="" />
        </div>
        <div class="carousel-slide">
            <div class="carousel-caption drop-shadow-sm">
                <h4 class="mb-1 text-lg font-bold leading-none">Sixth slide label</h4>
                <div class="text-sm">Sit aliquip anim excepteur doanim</div>
            </div>
            <img src="../assets/img/gallery/9.jpg" alt="" />
        </div>
    </div>
    <button type="button" class="carousel-prev icon">
        west
        <span class="sr-only">Previous</span>
    </button>
    <button type="button" class="carousel-next icon">
        east
        <span class="sr-only">Next</span>
    </button>

    <div class="carousel-dots"></div>
</div>