Crousel

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

Example

Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.


<div class="custom-swiper-slider">
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
    <div class="swiper-slide relative">
        <svg class="block w-full" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img">
        <rect width="100%" height="100%" fill="#777"></rect><text x="46%" y="50%" fill="#555" dy="0rem">First slide</text>
        </svg>
        <div class="absolute text-white w-full block bottom-12 text-center">
        <p class="text-black text-2xl">First slide label</p>
        <p>Some representative placeholder content for First slide</p>
        </div>
    </div>
    <div class="swiper-slide">
        <svg class="block w-full" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img">
        <rect width="100%" height="100%" fill="#666"></rect><text x="46%" y="50%" fill="#444" dy="0rem">Second slide</text>
        </svg>
        <div class="absolute text-white bottom-12 w-full text-center">
        <p class="text-black text-2xl">second slide label</p>
        <p>Some representative placeholder content for Second slide</p>
        </div>
    </div>
    <div class="swiper-slide">
        <svg class="block w-full" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img">
        <rect width="100%" height="100%" fill="#555"></rect><text x="46%" y="50%" fill="#333" dy="0rem">Third slide</text>
        </svg>
        <div class="absolute inline-block text-white bottom-12 w-full text-center">
        <p class="text-black text-2xl">Third slide label</p>
        <p>Some representative placeholder content for Third slide</p>
        </div>
    </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>
</div>
Previous Next