Dexo - Premium Admin Template

Carousel Dashboard

With Arrow

When you click on buttons, slider snap the image vertically.

❮❯

 <div class="carousel w-full overflow-hidden">
   <div class="carousel-item relative w-full box-border flex flex-none snap-start" id="slide1">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/1.jpg" alt="nature">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slide4">❮</a>
         <a class="btn" href="#slide2">❯</a>
      </div>
   </div>
   <div class="carousel-item relative w-full box-border flex flex-none snap-start" id="slide2">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/2.jpg" alt="butterfly">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slide1">❮</a>
         <a class="btn" href="#slide3">❯</a>
      </div>
   </div>
   <div class="carousel-item relative w-full box-border flex flex-none snap-start" id="slide3">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/3.jpg" alt="sky view">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slide2">❮</a>
         <a class="btn" href="#slide4">❯</a>
      </div>
   </div>
   <div class="carousel-item relative w-full box-border flex flex-none snap-start" id="slide4">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/4.jpg" alt="tree">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slide3">❮</a>
         <a class="btn" href="#slide1">❯</a>
      </div>
   </div>
</div>

With Buttons

You can set button to snap the image vertically.

1 2 3 4

 <div class="carousel w-full overflow-hidden">
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="item1">
       <img class="w-full h-[250px] xl:h-[184px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/3.jpg" alt="SKY VIEW">
   </div>
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="item2">
       <img class="w-full h-[250px] xl:h-[184px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/4.jpg" alt="tree">
   </div>
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="item3">
       <img class="w-full h-[250px] xl:h-[184px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/1.jpg" alt="nature">
   </div>
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="item4">
       <img class="w-full h-[250px] xl:h-[184px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/2.jpg" alt="butterfly">
   </div>
</div>
<div class="flex justify-center w-full pt-2 gap-2">
   <a class="btn btn-xs bg-primary text-white" href="#item1">1</a>
   <a class="btn btn-xs bg-primary text-white" href="#item2">2</a>
   <a class="btn btn-xs bg-primary text-white" href="#item3">3</a>
   <a class="btn btn-xs bg-primary text-white" href="#item4">4</a>
</div>

With Dots

When you click on dots, slider snap the image vertically.

 <div class="carousel w-full overflow-hidden">
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="slide-1">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/2.jpg" alt="butterfly">
   </div>
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="slide-2">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/1.jpg" alt="nature">
   </div>
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="slide-3">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/3.jpg" alt="sky view">
   </div>
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="slide-4">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/4.jpg" alt="tree">
   </div>
</div>
<div class="flex justify-center w-full pt-2 gap-2">
   <a class="btn h-2 w-2 bg-primary p-0" href="#slide-1"></a>
   <a class="btn h-2 w-2 bg-primary p-0" href="#slide-2"></a>
   <a class="btn h-2 w-2 bg-primary p-0" href="#slide-3"></a>
   <a class="btn h-2 w-2 bg-primary p-0" href="#slide-4"></a>
</div>

Indicator

When you click on bottom line, slider snap the image vertically.

 <div class="carousel w-full overflow-hidden">
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="slide-1">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/4.jpg" alt="tree">
   </div>
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="slide-2">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/1.jpg" alt="nature">
   </div>
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="slide-3">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/3.jpg" alt="sky view">
   </div>
   <div class="carousel-item w-full box-border flex flex-none snap-start" id="slide-4">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/2.jpg" alt="butterfly">
   </div>
</div>
<div class="flex justify-center w-full pt-2 gap-2">
   <a class="btn w-6 bg-success p-0 h-[2px]" href="#slide-1"></a>
   <a class="btn w-6 bg-success p-0 h-[2px]" href="#slide-2"></a>
   <a class="btn w-6 bg-success p-0 h-[2px]" href="#slide-3"></a>
   <a class="btn w-6 bg-success p-0 h-[2px]" href="#slide-4"></a>
</div>

With Arrow & Indicator

When you click on buttons, slider snap the image vertically.

❮❯

 <div class="carousel w-full overflow-hidden">
   <div class="carousel-item relative w-full box-border flex flex-none snap-start" id="slider1">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/3.jpg" alt="sky view">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slider4">❮</a>
         <a class="btn" href="#slider2">❯</a>
      </div>
      <div class="flex justify-center gap-2 left-1/2 -translate-x-1/2 bottom-2">
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-1"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-2"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-3"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-4"></a>
      </div>
   </div>
   <div class="carousel-item relative w-full box-border flex flex-none snap-start" id="slider2">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/2.jpg" alt="butterfly">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slider1">❮</a>
         <a class="btn" href="#slider3">❯</a>
      </div>
      <div class="flex justify-center gap-2 left-1/2 -translate-x-1/2 bottom-2">
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-1"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-2"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-3"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-4"></a>
      </div>
   </div>
   <div class="carousel-item relative w-full box-border flex flex-none snap-start" id="slider3">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/1.jpg" alt="nature">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slider2">❮</a>
         <a class="btn" href="#slider4">❯</a>
      </div>
      <div class="flex justify-center gap-2 left-1/2 -translate-x-1/2 bottom-2">
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-1"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-2"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-3"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-4"></a>
      </div>
   </div>
   <div class="carousel-item relative w-full box-border flex flex-none snap-start" id="slider4">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/4.jpg" alt="tree">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slider3">❮</a>
         <a class="btn" href="#slider1">❯</a>
      </div>
      <div class="flex justify-center gap-2 left-1/2 -translate-x-1/2 bottom-2">
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-1"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-2"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-3"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-4"></a>
      </div>
   </div>
</div>

Vertical carousel

You can set carousel vertically using carousel-vertical class.

 <div class="w-60 h-72 carousel sm:w-52 sm:h-72">
   <div class="carousel-item h-full">
    <img class="w-full" src="../../assets/images/carousel/5.jpg" alt="night view">
   </div>
   <div class="carousel-item h-full">
    <img class="w-full" src="../../assets/iges/camarousel/6.jpg" alt="sunflower">
   </div>
   <div class="carousel-item h-full">
    <img class="w-full" src="../../assets/images/carousel/7.jpg" alt="moon">
   </div>
   <div class="carousel-item h-full">
    <img class="w-full" src="../../assets/images/carousel/8.jpg" alt="forest">
   </div>
</div>

Hand crafted & made with

Customizer