Govo - Premium Admin Template

Swiper Slider

Set swiper slider using .defaultSlider class.

<div class="swiper defaultSlider">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
 </div> 
</div>

With Navigation slider

Set swiper slider using .sliderPagination class.

<div class="swiper sliderPagination">
  <div class="swiper-wrapper">  
      <div class="swiper-slide">
          img(class="w-full h-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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 Custom Pagination

Set swiper slider using .sliderPaginationCustom class.

<div class="swiper sliderPaginationCustom">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
  </div> 
  <div class="relative mt-4 swiper-pagination fraction-custom"></div>
</div>

With Clickable Pagination

Set clickable pagination swiper slider.

<div class="swiper sliderLazyLoading">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
  </div>
  <div class="relative mt-4 swiper-pagination"></div>
</div>

With Fade Animation

Add fade swiper slider using .slideFadeSlider class.

<div class="swiper slideFadeSlider">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[22.9375rem] xl:h-[18.125rem]  lg:h-[24.6875rem] 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-[22.9375rem] xl:h-[18.125rem]  lg:h-[24.6875rem] 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-[22.9375rem] xl:h-[18.125rem]  lg:h-[24.6875rem] 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-[22.9375rem] xl:h-[18.125rem]  lg:h-[24.6875rem] 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-[22.9375rem] xl:h-[18.125rem]  lg:h-[24.6875rem] 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-[22.9375rem] xl:h-[18.125rem]  lg:h-[24.6875rem] 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-[22.9375rem] xl:h-[18.125rem]  lg:h-[24.6875rem] 2lg:h-80 sm:h-52 2sm:h-44" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
  </div>                      
</div>

With Thumbs

Add thumbs swiper slider using .sliderThumbnail class.

<div class="swiper sliderMain">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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-[17.625rem] xl:h-[13.4375rem]  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" data-thumbsslider="">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          img(class="w-full h-[4.8125rem] xl:h-[4.0625rem] 2lg:h-[5rem] md:h-[4.375rem] sm:h-[3.125rem]" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[4.8125rem] xl:h-[4.0625rem] 2lg:h-[5rem] md:h-[4.375rem] sm:h-[3.125rem]" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[4.8125rem] xl:h-[4.0625rem] 2lg:h-[5rem] md:h-[4.375rem] sm:h-[3.125rem]" src="../../assets/images/carousel/3.jpg" alt="sky view")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[4.8125rem] xl:h-[4.0625rem] 2lg:h-[5rem] md:h-[4.375rem] sm:h-[3.125rem]" src="../../assets/images/carousel/5.jpg" alt="city")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[4.8125rem] xl:h-[4.0625rem] 2lg:h-[5rem] md:h-[4.375rem] sm:h-[3.125rem]" src="../../assets/images/carousel/1.jpg" alt="nature")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[4.8125rem] xl:h-[4.0625rem] 2lg:h-[5rem] md:h-[4.375rem] sm:h-[3.125rem]" src="../../assets/images/carousel/2.jpg" alt="butterfly")
      </div>
      <div class="swiper-slide">
          img(class="w-full h-[4.8125rem] xl:h-[4.0625rem] 2lg:h-[5rem] md:h-[4.375rem] sm:h-[3.125rem]" 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
Monochrome Mode

Swiper Slider

Unique Dashboard

Ecommerce Dashboard

Swiper Slider

With Navigation slider

With Custom Pagination

With Clickable Pagination

With Fade Animation

With Thumbs

Template Mode

Layout Type

Notification

Dmitriy Groshev

Sufiya Elija

Janis Evans

Mukrani Pabelo

Josephin Water

Janis Evans

Sufiya Elija

Messages

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

Bag Total

Helen Walter

Unique Dashboard

Ecommerce Dashboard

Swiper Slider

With Navigation slider

With Custom Pagination

With Clickable Pagination

With Fade Animation

With Thumbs

Template Mode

Layout Type