Swiper-Slider

  1. Advance UI
  2. Swiper-Slider
Overview Official Website

Swiper is the most modern slider with hardware accelerated transitions and amazing native behavior.

Import Package
<!--import Swiper slider-->
import SwiperCore, { Thumbs, Pagination, Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
Add Package
yarn add swiper --save
Remove Package
yarn remove swiper or you can remove package by removing specific package from package.json
CSS
<!--Swiper slider css-->
import "swiper/swiper-bundle.css";
Examples
Title Example
Default Swiper 
<swiper class="default-swiper rounded" :autoplay="{ delay: 2500, disableOnInteraction: false }" :modules="[Autoplay]">
    <swiper-slide>
        ...
    </swiper-slide>
    <swiper-slide>
        ...
    </swiper-slide>
    <swiper-slide>
        ...
    </swiper-slide>
</swiper>
Navigation & Pagination Swiper 
<swiper class="navigation-swiper rounded" :loop="true" :modules="[Autoplay, Navigation, Pagination]"
:autoplay="{ delay: 2500, disableOnInteraction: false }"
:navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }"
:pagination="{ clickable: true, el: '.swiper-pagination' }">
    <swiper-slide>
        ...
    </swiper-slide>
    <swiper-slide>
        ...
    </swiper-slide>
    <swiper-slide>
        ...
    </swiper-slide>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</swiper>
Pagination Dynamic Swiper 
<swiper class="pagination-dynamic-swiper rounded" :loop="true"
    :autoplay="{ delay: 2500, disableOnInteraction: false }"
    :pagination="{ clickable: true, el: '.swiper-pagination', dynamicBullets: true }"
    :modules="[Autoplay, Pagination]">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-pagination dynamic-pagination"></div>
</swiper>
Pagination Fraction Swiper 
 <swiper class="pagination-fraction-swiper" :loop="true"
    :autoplay="{ delay: 2500, disableOnInteraction: false }"
    :pagination="{ clickable: true, el: '.swiper-pagination', type: 'fraction', }"
    :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }"
    :modules="[Autoplay, Navigation, Pagination]">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination text-light"></div>
</swiper>
Pagination Custom Swiper 
<swiper class="pagination-custom-swiper rounded" :modules="[Autoplay, Pagination]" :loop="true"
    :autoplay="{ delay: 2500, disableOnInteraction: false }" :pagination="pagination">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-pagination pagination-custom"></div>
</swiper>
Pagination Progress Swiper 
<swiper class="pagination-progress-swiper rounded" :modules="[Autoplay, Pagination]" :loop="true"
    :autoplay="{ delay: 2500, disableOnInteraction: false }" :pagination="{ type: 'progressbar' }"
    :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</swiper>
Scrollbar Swiper 
<swiper class="pagination-scrollbar-swiper rounded" :loop="true" :modules="scrollbarModules"
    :autoplay="{ delay: 2500, disableOnInteraction: false }"
    :scrollbar="{ el: '.swiper-scrollbar', hide: true }"
    :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-scrollbar"></div>
</swiper>
Vertical Swiper 
<swiper class="vertical-swiper rounded" :loop="true" :direction="'vertical'" :modules="[Autoplay, Pagination]"
    :autoplay="{ delay: 2500, disableOnInteraction: false }"
    :pagination="{ el: '.swiper-pagination', clickable: true }" style="height: 324px">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-pagination"></div>
</swiper>
Mousewheel Control Swiper 
<swiper class="mousewheel-control-swiper rounded" :loop="true" :direction="'vertical'" :mousewheel="true"
    :modules="mousewheelModules" :autoplay="{ delay: 2500, disableOnInteraction: false }"
    :pagination="{ el: '.swiper-pagination', clickable: true }" style="height: 324px">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-pagination"></div>
</swiper>
Effect Fade Swiper 
<swiper class="effect-fade-swiper rounded" :loop="true" :effect="'fade'" :modules="effectFadeModules"
    :autoplay="{ delay: 2500, disableOnInteraction: false }"
    :pagination="{ el: '.swiper-pagination', clickable: true }">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-pagination"></div>
</swiper>
Effect Creative Swiper 
<swiper class="effect-creative-swiper rounded" :loop="true" :effect="'creative'" :grabCursor="true"
    :modules="[EffectCreative, Pagination]" :creativeEffect="{
      prev: {
        shadow: true,
        translate: [0, 0, -400],
      },
      next: {
        translate: ['100%', 0, 0],
      },
    }" :autoplay="{ delay: 2500, disableOnInteraction: false }"
    :pagination="{ el: '.swiper-pagination', clickable: true }">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-pagination"></div>
</swiper>
Effect Flip Swiper 
<swiper class="effect-flip-swiper rounded" :loop="true" :effect="'flip'" :modules="effectFlipModules"
    :grabCursor="true" :autoplay="{ delay: 2500, disableOnInteraction: false }"
    :pagination="{ el: '.swiper-pagination', clickable: true }">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-pagination"></div>
</swiper>
Effect Coverflow Swiper 
<swiper class="effect-coverflow-swiper rounded pb-5" :loop="true" :effect="'coverflow'" :grabCursor="true"
    :centeredSlides="true" :slidesPerView="4" :modules="coverflowModules"
    :coverflowEffect="{ rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: true }"
    :autoplay="{ delay: 2500, disableOnInteraction: false }"
    :pagination="{ el: '.swiper-pagination', clickable: true, dynamicBullets: true }">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-pagination swiper-pagination-dark"></div>
</swiper>
Responsive Breakpoints Swiper 
<swiper class="swiper responsive-swiper rounded gallery-light pb-4" :loop="true" :slidesPerView="1"
    :spaceBetween="10" :pagination="{ el: '.swiper-pagination', clickable: true }" :modules="[Pagination]"
    :breakpoints="{ 
                    640: { slidesPerView: 2, spaceBetween: 20 }, 
                    768: { slidesPerView: 3, spaceBetween: 40 }, 
                    1200: { slidesPerView: 4, spaceBetween: 50 }, 
                }">
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <swiper-slide>
      ...
    </swiper-slide>
    <div class="swiper-pagination swiper-pagination-dark"></div>
</swiper>
© Velzon.
Design & Develop by Themesbrand