Dexo - Premium Admin Template

Swiper Slider

You can set swiper slider using .defaultSlider class.

  <div class="swiper defaultSlider">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/4.jpg" alt="tree")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
 </div> 
</div>

With Navigation slider

You can set swiper slider using .sliderPagination class.

  <div class="swiper sliderPagination">
  <div class="swiper-wrapper">  
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/4.jpg" alt="tree")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
  </div> 
  <div class="swiper-button-prev"> +SVG_ICON("Arrow-Left-2","h-5 w-5 stroke-danger") </div>
  <div class="swiper-button-next"> +SVG_ICON("Arrow-Right-2","h-5 w-5 stroke-danger") </div>
</div>

With Pagination Fraction

You can set swiper slider using .sliderPaginationFraction class.

  <div class="swiper sliderPaginationFraction">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/4.jpg" alt="tree")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
  </div>
  <div class="swiper-pagination relative mt-4"></div>
</div>

With Custom Pagination

You can set swiper slider using .sliderPaginationCustom class.

  <div class="swiper sliderPaginationCustom">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/4.jpg" alt="tree")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
  </div> 
  <div class="swiper-pagination fraction-custom relative mt-4"></div>
</div>

With Pagination

You can set swiper slider using .sliderPagination class.

  <div class="swiper sliderPagination">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div> 
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/4.jpg" alt="tree")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
  </div>
  <div class="swiper-pagination relative mt-4"></div>
</div>

With Clickable Pagination

You can set clickable pagination swiper slider.

  <div class="swiper sliderLazyLoading">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div> 
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/4.jpg" alt="tree")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
  </div>
  <div class="swiper-pagination relative mt-4"></div>
</div>

With Fade Animation

You can set fade swiper slider using .slideFadeSlider class.

  <div class="swiper slideFadeSlider">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[367px] xl:h-[290px]  lg:h-[395px] 2lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/4.jpg" alt="tree")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[367px] xl:h-[290px]  lg:h-[395px] 2lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[367px] xl:h-[290px]  lg:h-[395px] 2lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[367px] xl:h-[290px]  lg:h-[395px] 2lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[367px] xl:h-[290px]  lg:h-[395px] 2lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[367px] xl:h-[290px]  lg:h-[395px] 2lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[367px] xl:h-[290px]  lg:h-[395px] 2lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
  </div>                      
</div>

With Thumbs

You can set thumbs swiper slider using .sliderThumbnail class.

  <div class="swiper sliderMain">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/5.jpg" alt="city")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[282px] xl:h-[215px]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
  </div> 
</div>
<div class="swiper sliderThumbnail">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[77px] xl:h-[65px] 2lg:h-[80px] md:h-[70px] sm:h-[50px]" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[77px] xl:h-[65px] 2lg:h-[80px] md:h-[70px] sm:h-[50px]" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[77px] xl:h-[65px] 2lg:h-[80px] md:h-[70px] sm:h-[50px]" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[77px] xl:h-[65px] 2lg:h-[80px] md:h-[70px] sm:h-[50px]" src="../../assets/images/carousel/5.jpg" alt="city")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[77px] xl:h-[65px] 2lg:h-[80px] md:h-[70px] sm:h-[50px]" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[77px] xl:h-[65px] 2lg:h-[80px] md:h-[70px] sm:h-[50px]" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[77px] xl:h-[65px] 2lg:h-[80px] md:h-[70px] sm:h-[50px]" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
  </div> 
</div>

Hand crafted & made with

Customizer

Template Mode
Choose template mode dark & light
Layout Type
Choose layout Ltr & Rtl
Sidebar Type
Choose Sidebar icon & full
Monochrome Mode

Reset Buy Now

Notification

Dmitriy Groshev

Sufiya Elija

Janis Evans

Mukrani Pabelo

Josephin Water

Janis Evans

Sufiya Elija

Notification

New Review Receive

Transaction $250 Success

Order Place Success

Netflix Subscription Expires

Congratulations You Won $2500

Latest Updates On You Phone

Cart Items (25)

Flower Pot

Iphone Max pro

Royal Party Glass

Water Proof Watch

Traveling Duffle Bag

Add Total

Helen Walter

Swiper Slider

Swiper Slider

With Navigation slider

With Pagination Fraction

With Custom Pagination

With Pagination

With Clickable Pagination

With Fade Animation

With Thumbs

Template Mode

Layout Type

Sidebar Type