Modern Mobile Touch Slider With Acceleration Transitions

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web applications, and native/hybrid mobile applications.

Swiper is not compatible with all platforms, it is a modern touch slider that only focuses on recent apps/platforms to offer the best experience and simplicity.

Features

Tree viable: Only modules that you use will be imported into your app’s bundle.
Mobile Friendly: It is intended for use in mobile websites, mobile web apps, and native/hybrid mobile apps.
Library Agnostic: Swiper does not require any JavaScript libraries like jQuery, which makes Swiper smaller and faster. It can be used safely with libraries like jQuery, Zepto, jQuery Mobile, etc.
1:1 touch motion: By default, Swiper provides 1:1 touch motion interaction, but this ratio can be configured through Swiper’s settings.
Mutation Observer: Swiper has the option to enable the MutationObserver, with this feature Swiper will automatically reinitialize and recalculate all required parameters if you make dynamic changes to the DOM, or to the Swiper Styles itself.
Rich API: Swiper comes with a very rich API. It allows you to create pagination, navigation buttons, parallax effects, and much more.
RTL: Swiper is the only slider that provides 100% right-to-left support with the correct layout.
Multi-row slide layout: Swiper allows a multi-row slide layout, with just a few slides per column.
Transition Effects: Fade, Reflect, 3D Cube, 3D Cover Flow.
Two-Way Control: Swiper can be used as a controller for any number of other Swipers, and can even be controlled at the same time.
Full Navigation Control: Swiper comes with all required built-in navigation elements, such as pagination, navigation arrows, and a scroll bar.
Flexbox layout: Swiper uses the modern flexbox layout for slide layout, which solves a lot of problems and saves a lot of time with size sum operations. This layout also allows the sliding grid to be configured using pure CSS.
The most flexible slide layout grid: Swiper has a lot of parameters when configured to make it as flexible as possible. You can control slides per width, per column, per group, space between slides, and much more.
Lazy Image Loading: Swiper Lazy delays loading images in inactive/invisible slides until the user swipes right on them. This feature can make page loads faster and improve Swiper’s performance.
Virtual Slides: Swiper comes with the Virtual Slides feature which is great when you have a lot of slides or slides with heavy content/images heavy so you will keep the required amount of slides in the DOM.
Loop mode
Autoplay
Keyboard control
Mousewheel control
Nested sliders
History navigation
Hash navigation
Breakpoints configuration
Accessibility (A11y)
And many more …

Must Read: Fast, Lightweight & Mobile-friendly Number Picker Component | number-swiper

How to make use of it:

1. Install the package deal with NPM.

# NPM
$ npm i swiper --save

2. Import the Swiper as an ES module into your document.

import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';

3. Or load the required JavaScript and CSS files from a CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<!-- OR -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script type="module">
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.esm.browser.min.js'
</script>

4. Add slides to the swiper.

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    ...
  </div>
</div>

5. Initialize the swiper.

var swiper = new Swiper('.swiper-container');

6. Add pagination & navigation controls to the swiper.

<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Add Scrollbar -->
<div class="swiper-scrollbar"></div><br type="_moz">

var swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
      hide: true,
    }
});

7. This is a full listing of available configurations that can be utilized to customize your swiper.

var swiper = new Swiper('.swiper-container',{
    
    // auto init the intance
    init: true,

    // 'horizontal' or 'vertical' 
    direction: 'horizontal',

    // target element to listen touch events on. 
    touchEventsTarget: 'container',

    // initial slide index
    initialSlide: 0,

    // animation speed
    speed: 300,

    // whether to use modern CSS Scroll Snap API.
    cssMode: false,

    // auto update on window resize
    updateOnWindowResize: true,

    // Overrides
    width: null,
    height: null,

    // allow to change slides by swiping or navigation/pagination buttons during transition
    preventInteractionOnTransition: false,

    // for ssr
    userAgent: null,
    url: null,

    // To support iOS's swipe-to-go-back gesture (when being used in-app).
    edgeSwipeDetection: false,
    edgeSwipeThreshold: 20,

    // Free mode
    // If true then slides will not have fixed positions
    freeMode: false,
    freeModeMomentum: true,
    freeModeMomentumRatio: 1,
    freeModeMomentumBounce: true,
    freeModeMomentumBounceRatio: 1,
    freeModeMomentumVelocityRatio: 1,
    freeModeSticky: false,
    freeModeMinimumVelocity: 0.02,

    // Autoheight
    autoHeight: false,

    // Set wrapper width
    setWrapperSize: false,

    // Virtual Translate
    virtualTranslate: false,

    // slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
    effect: 'slide',

    // Breakpoints
    /* eg
       breakpoints: {
        // when window width is >= 320px
        320: {
          slidesPerView: 2,
          spaceBetween: 20
        },
        // when window width is >= 480px
        480: {
          slidesPerView: 3,
          spaceBetween: 30
        },
        // when window width is >= 640px
        640: {
          slidesPerView: 4,
          spaceBetween: 40
        }
       }
    */
    breakpoints: undefined,

    // Slides
    spaceBetween: 0,
    slidesPerView: 1,
    slidesPerColumn: 1,
    slidesPerColumnFill: 'column',
    slidesPerGroup: 1,
    slidesPerGroupSkip: 0,
    centeredSlides: false,
    centeredSlidesBounds: false,
    slidesOffsetBefore: 0,
    // in px
    slidesOffsetAfter: 0,
    // in px
    normalizeSlideIndex: true,
    centerInsufficientSlides: false,

    // Disable swiper and hide navigation when container not overflow
    watchOverflow: false,

    // Round length
    roundLengths: false,

    // Options for touch events
    touchRatio: 1,
    touchAngle: 45,
    simulateTouch: true,
    shortSwipes: true,
    longSwipes: true,
    longSwipesRatio: 0.5,
    longSwipesMs: 300,
    followFinger: true,
    allowTouchMove: true,
    threshold: 0,
    touchMoveStopPropagation: false,
    touchStartPreventDefault: true,
    touchStartForcePreventDefault: false,
    touchReleaseOnEdges: false,

    // Unique Elements
    uniqueNavElements: true,

    // Resistance
    resistance: true,
    resistanceRatio: 0.85,

    // Progress
    watchSlidesProgress: false,
    watchSlidesVisibility: false,

    // Cursor
    grabCursor: false,

    // Clicks
    preventClicks: true,
    preventClicksPropagation: true,
    slideToClickedSlide: false,

    // Images
    preloadImages: true,
    updateOnImagesReady: true,

    // loop
    loop: false,
    loopAdditionalSlides: 0,
    loopedSlides: null,
    loopFillGroupWithBlank: false,
    loopPreventsSlide: true,

    // Swiping/no swiping
    allowSlidePrev: true,
    allowSlideNext: true,
    swipeHandler: null,

    // '.swipe-handler',
    noSwiping: true,
    noSwipingClass: 'swiper-no-swiping',
    noSwipingSelector: null,

    // Passive Listeners
    passiveListeners: true,

    // Default classes
    containerModifierClass: 'swiper-container-',
    slideClass: 'swiper-slide',
    slideBlankClass: 'swiper-slide-invisible-blank',
    slideActiveClass: 'swiper-slide-active',
    slideDuplicateActiveClass: 'swiper-slide-duplicate-active',
    slideVisibleClass: 'swiper-slide-visible',
    slideDuplicateClass: 'swiper-slide-duplicate',
    slideNextClass: 'swiper-slide-next',
    slideDuplicateNextClass: 'swiper-slide-duplicate-next',
    slidePrevClass: 'swiper-slide-prev',
    slideDuplicatePrevClass: 'swiper-slide-duplicate-prev',
    wrapperClass: 'swiper-wrapper',

    // Callbacks
    runCallbacksOnInit: true
    
});

8. API strategies.

// go to next slide at a given speed
mySwiper.slideNext(speed, runCallbacks);

// back to previous slide at a given speed
mySwiper.slidePrev(speed, runCallbacks);

// slide to a specific slide at a given speed
mySwiper.slideTo(index, speed, runCallbacks);

// Does the same as .slideTo but for the case when used with enabled loop.
mySwiper.slideToLoop(index, speed, runCallbacks);

// Reset swiper position to currently active slide
mySwiper.slideReset(speed, runCallbacks);

// Reset swiper position to closest slide/snap point
mySwiper.slideToClosest(speed, runCallbacks);

// Update height
mySwiper.updateAutoHeight(speed);

// Update swiper
mySwiper.update();

// Changes slider direction from horizontal to vertical and back.
mySwiper.changeDirection(direction);

// update size
mySwiper.updateSize() ;

// update slides
mySwiper.updateSlides();

// update progress
mySwiper.updateProgress();

// update classes
mySwiper.updateSlidesClasses();

// detach all event listeners
mySwiper.detachEvents();

// attach all event listeners
mySwiper.attachEvents();

// destroy the swiper instance
mySwiper.destroy(deleteInstance, cleanStyles); 

// append new slides to the slider
mySwiper.appendSlide(slides);

// prepend new slides to the slider
mySwiper.prependSlide(slides);

// add new slides
mySwiper.addSlide(index, slides);

// remove a slide
mySwiper.removeSlide(slideIndex);

// remove all slides
mySwiper.removeAllSlides();

// set custom CSS transforms
mySwiper.setTranslate(translate);

// animate custom css3 transform's translate value for swiper wrapper
mySwiper.translateTo(translate, speed, runCallbacks, translateBounds);

// get the current transform value
mySwiper.getTranslate(); 

// add event listener
mySwiper.on(event, handler);

// that will be executed only once
mySwiper.once(event, handler);

// remove event listener for specified event
mySwiper.off(event, handler);

// remove all listeners
mySwiper.off(event);

// unset grab cursor
mySwiper.unsetGrabCursor();

// set grab cursor
mySwiper.setGrabCursor();

9. Event listeners.

mySwiper.on('beforeDestroy', function(){
  // do something
}) 

mySwiper.on('slideChange', function(){
  // do something
}) 

mySwiper.on('slideChangeTransitionStart', function(){
  // do something
}) 

mySwiper.on('slideChangeTransitionEnd', function(){
  // do something
}) 

mySwiper.on('slideNextTransitionStart', function(){
  // do something
}) 

mySwiper.on('slideNextTransitionEnd', function(){
  // do something
}) 

mySwiper.on('slidePrevTransitionStart', function(){
  // do something
}) 

mySwiper.on('slidePrevTransitionEnd', function(){
  // do something
}) 

mySwiper.on('transitionStart', function(){
  // do something
}) 

mySwiper.on('transitionEnd', function(){
  // do something
}) 

mySwiper.on('imagesReady', function(){
  // do something
}) 

mySwiper.on('reachBeginning', function(){
  // do something
}) 

mySwiper.on('reachEnd', function(){
  // do something
}) 

mySwiper.on('fromEdge', function(){
  // do something
}) 

mySwiper.on('toEdge', function(){
  // do something
}) 

mySwiper.on('resize', function(){
  // do something
}) 

mySwiper.on('observerUpdate', function(){
  // do something
}) 

mySwiper.on('touchStart', function(e){
  // do something
}) 

mySwiper.on('touchMove', function(e){
  // do something
}) 

mySwiper.on('touchMoveOpposite', function(e){
  // do something
}) 

mySwiper.on('sliderMove', function(e){
  // do something
}) 

mySwiper.on('touchEnd', function(e){
  // do something
}) 

mySwiper.on('click', function(e){
  // do something
}) 

mySwiper.on('tap', function(e){
  // do something
}) 

mySwiper.on('doubleTap', function(e){
  // do something
}) 

mySwiper.on('progress', function(progress){
  // do something
}) 

mySwiper.on('setTranslate', function(translate){
  // do something
}) 

mySwiper.on('setTransition', function(transition){
  // do something
}) 

mySwiper.on('hashChange', function(){
  // do something
})

mySwiper.on('hashSet', function(){
  // do something
}) 

mySwiper.on('beforeLoopFix', function(){
  // do something
}) 

mySwiper.on('loopFix', function(){
  // do something
})

mySwiper.on('breakpoint', function(){
  // do something
})

10. Available Props.

mySwiper.params
mySwiper.$el
mySwiper.$wrapperEl
mySwiper.slides
mySwiper.width
mySwiper.height
mySwiper.translate 
mySwiper.progress 
mySwiper.activeIndex  
mySwiper.realIndex  
mySwiper.previousIndex
mySwiper.isBeginning
mySwiper.isEnd
mySwiper.animating
mySwiper.touches
mySwiper.touches.startX
mySwiper.touches.startY
mySwiper.touches.currentX
mySwiper.touches.currentY
mySwiper.touches.diff
mySwiper.clickedIndex
mySwiper.clickedSlide
mySwiper.allowSlideNext
mySwiper.allowSlidePrev
mySwiper.allowTouchMove