The Swiper plugin allows you to add a slider element to your site. It is completely customisable with responsive breakpoints options as well.
<div class="swiper-container relative">
<div
class="swiper"
data-toggle="swiper"
data-options="{'slidesPerView':1,'pagination':{'el':'.swiper-pagination','clickable':true,'renderBullet':'number','bulletClass':'swiper-pagination-bullet w-8 h-8 flex justify-center items-center text-base text-center text-dark opacity-100 bg-primary-300/40 rounded-full cursor-pointer','bulletActiveClass':'swiper-pagination-bullet-active bg-primary-600 text-white'},'spaceBetween':16,'breakpoints':{'1024':{'slidesPerView':2,'slidesPerGroup':2}},'navigation':{'prevEl':'.swiper-button-prev','nextEl':'.swiper-button-next'}}"
>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="h-64 flex justify-center items-center bg-primary-100">
<h2>Slide 1</h2>
</div>
</div>
<div class="swiper-slide">
<div class="h-64 flex justify-center items-center bg-secondary-100">
<h2>Slide 2</h2>
</div>
</div>
<div class="swiper-slide">
<div class="h-64 flex justify-center items-center bg-warning-100">
<h2>Slide 3</h2>
</div>
</div>
<div class="swiper-slide">
<div class="h-64 flex justify-center items-center bg-success-100">
<h2>Slide 4</h2>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-pagination static mt-2 flex flex-row justify-center gap-x-2 w-full"></div>
</div>