A slideshow component for cycling through elements—images or slides of text—like a carousel.
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>
CSS
.custom-swiper-slider{
.swiper-pagination-bullet{
height: 16px;
width:16px;
background: #fff;
}
.swiper-button-next{
color: rgb(187, 182, 182) ;
}
.swiper-button-prev{
color: rgb(187, 182, 182);
}
.swiper-slide{
width:100% !important;
}
}
function closeAlert(event) {
let element = event.target;
while (element.nodeName !== "BUTTON") {
element = element.parentNode;
}
element.parentNode.parentNode.removeChild(element.parentNode);
}