Modernize TailwindCSS HTML Admin Template

Slides only

Slides only - View Code

       
<!-- 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.

Carousel With Controls

Carousel With Controls - View Code

       
<!-- 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.

Pagination

Pagination - View Code

       
<!-- 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-lg">
      <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.

Autoplay

Autoplay - View Code

       
<!-- 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-lg">
      <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.