Modern Mobile Touch Slider With Acceleration Transitions | Swiper

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.


  • 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 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="" />
<script src=""></script>

<!-- OR -->
<link rel="stylesheet" href="" />
<script type="module">
  import Swiper from ''

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>

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

// Update swiper

// Changes slider direction from horizontal to vertical and back.

// update size
mySwiper.updateSize() ;

// update slides

// update progress

// update classes

// detach all event listeners

// attach all event listeners

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

// append new slides to the slider

// prepend new slides to the slider

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

// remove a slide

// remove all slides

// set custom CSS transforms

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

// get the current transform value

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

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

// remove event listener for specified event, handler);

// remove all listeners;

// unset grab cursor

// set grab cursor

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.



See Demo And Download

Official Website(nolimits4web): Click Here

This superior jQuery/javascript plugin is developed by nolimits4web. For extra Advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…

Leave a Reply

Your email address will not be published. Required fields are marked *