<!-- Slider -->
<div data-hs-carousel='{
"loadingClasses": "opacity-0",
"isAutoPlay": true
}' class="relative">
<div class="hs-carousel relative overflow-hidden w-full min-h-[350px] bg-white rounded-md">
<div class="hs-carousel-body absolute top-0 bottom-0 start-0 flex flex-nowrap transition-transform duration-700 opacity-0">
<div class="hs-carousel-slide">
<div class="flex justify-center h-full bg-gray-100">
<img src="../assets/images/blog/blog-img1.jpg" alt="" class="w-full">
</div>
</div>
<div class="hs-carousel-slide">
<div class="flex justify-center h-full bg-gray-200">
<img src="../assets/images/blog/blog-img2.jpg" alt="" class="w-full">
</div>
</div>
<div class="hs-carousel-slide">
<div class="flex justify-center h-full bg-gray-300">
<img src="../assets/images/blog/blog-img3.jpg" alt="" class="w-full">
</div>
</div>
</div>
</div>
</div>
<!-- End Slider -->
Carousel with only slides.
<!-- Slider -->
<div data-hs-carousel='{
"loadingClasses": "opacity-0",
"isAutoPlay": true
}' class="relative">
<div class="hs-carousel relative overflow-hidden w-full min-h-[350px] bg-white rounded-md">
<div class="hs-carousel-body absolute top-0 bottom-0 start-0 flex flex-nowrap transition-transform duration-700 opacity-0">
<div class="hs-carousel-slide">
<div class="flex justify-center h-full bg-gray-100">
<img src="../assets/images/blog/blog-img4.jpg" alt="" class="w-full">
</div>
</div>
<div class="hs-carousel-slide">
<div class="flex justify-center h-full bg-gray-200">
<img src="../assets/images/blog/blog-img5.jpg" alt="" class="w-full">
</div>
</div>
<div class="hs-carousel-slide">
<div class="flex justify-center h-full bg-gray-300">
<img src="../assets/images/blog/blog-img6.jpg" alt="" class="w-full">
</div>
</div>
</div>
</div>
<button type="button" class="hs-carousel-prev hs-carousel:disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 start-0 inline-flex justify-center items-center w-[46px] h-full text-gray-800 hover:bg-gray-800/[.1]">
<span class="text-2xl" aria-hidden="true">
<i class="ti ti-chevron-left text-2xl leading-tight font-medium text-gray-800"></i>
</span>
<span class="sr-only">Previous</span>
</button>
<button type="button" class="hs-carousel-next hs-carousel:disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 end-0 inline-flex justify-center items-center w-[46px] h-full text-gray-800 hover:bg-gray-800/[.1]">
<span class="sr-only">Next</span>
<span class="text-2xl" aria-hidden="true">
<i class="ti ti-chevron-right text-2xl leading-tight font-medium text-gray-800"></i>
</span>
</button>
</div>
<!-- End Slider -->
Use with indicators.
<!-- Slider -->
<div data-hs-carousel='{
"loadingClasses": "opacity-0"
}' class="relative">
<div class="hs-carousel relative overflow-hidden w-full min-h-[350px] bg-white rounded-md">
<div class="hs-carousel-body absolute top-0 bottom-0 start-0 flex flex-nowrap transition-transform duration-700 opacity-0">
<div class="hs-carousel-slide">
<div class="flex justify-center h-full ">
<img src="../assets/images/blog/blog-img10.jpg" alt="" class="w-full">
</div>
</div>
<div class="hs-carousel-slide">
<div class="flex justify-center h-full">
<img src="../assets/images/blog/blog-img8.jpg" alt="" class="w-full">
</div>
</div>
<div class="hs-carousel-slide">
<div class="flex justify-center h-full">
<img src="../assets/images/blog/blog-img9.jpg" alt="" class="w-full">
</div>
</div>
</div>
</div>
<div class="hs-carousel-pagination flex justify-center absolute bottom-3 start-0 end-0 space-x-2">
<span class="hs-carousel-active:bg-primaryemphasis hs-carousel-active:border-primarybg-primaryemphasis size-3 border border-gray-400 rounded-full cursor-pointer"></span>
<span class="hs-carousel-active:bg-primaryemphasis hs-carousel-active:border-primarybg-primaryemphasis size-3 border border-gray-400 rounded-full cursor-pointer"></span>
<span class="hs-carousel-active:bg-primaryemphasis hs-carousel-active:border-primarybg-primaryemphasis size-3 border border-gray-400 rounded-full cursor-pointer"></span>
</div>
</div>
<!-- End Slider -->
Use with pagination.
<!-- Slider -->
<div data-hs-carousel='{
"loadingClasses": "opacity-0",
"isAutoPlay": true
}' class="relative">
<div class="hs-carousel relative overflow-hidden w-full min-h-[350px] bg-white rounded-md">
<div class="hs-carousel-body absolute top-0 bottom-0 start-0 flex flex-nowrap transition-transform duration-700 opacity-0">
<div class="hs-carousel-slide">
<div class="flex justify-center h-full ">
<img src="../assets/images/blog/blog-img1.jpg" alt="" class="w-full">
</div>
</div>
<div class="hs-carousel-slide">
<div class="flex justify-center h-full">
<img src="../assets/images/blog/blog-img2.jpg" alt="" class="w-full">
</div>
</div>
<div class="hs-carousel-slide">
<div class="flex justify-center h-full">
<img src="../assets/images/blog/blog-img3.jpg" alt="" class="w-full">
</div>
</div>
</div>
</div>
<button type="button" class="hs-carousel-prev hs-carousel:disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 start-0 inline-flex justify-center items-center w-[46px] h-full text-gray-800 hover:bg-gray-800/[.1]">
<span class="text-2xl" aria-hidden="true">
<i class="ti ti-chevron-left text-2xl leading-tight font-medium text-gray-800"></i>
</span>
<span class="sr-only">Previous</span>
</button>
<button type="button" class="hs-carousel-next hs-carousel:disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 end-0 inline-flex justify-center items-center w-[46px] h-full text-gray-800 hover:bg-gray-800/[.1]">
<span class="sr-only">Next</span>
<span class="text-2xl" aria-hidden="true">
<i class="ti ti-chevron-right text-2xl leading-tight font-medium text-gray-800"></i>
</span>
</button>
<div class="hs-carousel-pagination flex justify-center absolute bottom-3 start-0 end-0 space-x-2">
<span class="hs-carousel-active:bg-primaryemphasis hs-carousel-active:border-primarybg-primaryemphasis size-3 border border-gray-400 rounded-full cursor-pointer"></span>
<span class="hs-carousel-active:bg-primaryemphasis hs-carousel-active:border-primarybg-primaryemphasis size-3 border border-gray-400 rounded-full cursor-pointer"></span>
<span class="hs-carousel-active:bg-primaryemphasis hs-carousel-active:border-primarybg-primaryemphasis size-3 border border-gray-400 rounded-full cursor-pointer"></span>
</div>
</div>
<!-- End Slider -->
Use '"isAutoPlay": true' to enable the autoplay feature.
