Swiper – The Most Modern Mobile Touch Slider

Swiper

Use with Swiper the most modern, touch-enabled Slider Script, written in vanilla JavaScript only! It offers a really extensive API, with 2 hundreds options and configurations. The script supports also RTL Layout, multiple Row-Slides per Column and a LazyLoad implementation! It offers also some built-in navigation elements, such as Pagination, Navigation Arrows and Scrollbars.

Also modern techniques like the CSS Flexbox Layout and a Mutation Observer are included as well. New transition effects (Fade, 3D Cube and 3D Coverflow), Virtual Slides and all Swiper2 well-known features, like Responsive, Scroll prevention, Resistant bounds, Autoplay, Loop mode, Nested Swipers, makes the package perfect! Swiper is designed for all modern browsers and can be used directly in your browser or as AMD, UMD, ES6 and nodeJS module!

Download the latest version of Swiper as .ZIP or as .TAR package!

npm i swiper --save

yarn add swiper --save

bower install swiper --save

Instructions

The Package contains the normal and minfied Stylesheets as well as the default JavaScript. The Script also contains a Source Map and a Extra “ECMAScript (ES) 6” Module-Styled edition is also available!

 

Load Swiper

You should load the Stylesheet directly within the HTML Header, while we recommend to link the JavaScript file directly after the opened <body> tag. The Swiper structure requires at least a main container, a wrapper as well as the respective slides. All other HTML elements, as shown below, are optional!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/swiper.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/swiper.min.js"></script>

        <!-- Required HTML Structure -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><!-- [...] --></div>
                <div class="swiper-slide"><!-- [...] --></div>
                <div class="swiper-slide"><!-- [...] --></div>
            </div>
            
            <!-- Additional Pagination -->
            <div class="swiper-pagination"></div>
            
            <!-- Additional Prev/Next Navigation -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
            <!-- Additional Scrollbar -->
            <div class="swiper-scrollbar"></div>
        </div>
    </body>
</html>

 

Configure Swiper

Swipers Configuration and API is to extensive to list everything here on one page! So it’S highly recommended to check out the official documentation page on the official website. It would be insane to list and describe all 200 options, so I will just list all available options with the respective default value below!

document.addEventListener("DOMContentLoaded", {
    var mySwiper = new Swiper(".swiper-container", {
        init:                           true,
        initialSlide:                   0,
        direction:                      'horizontal',
        speed:                          300,
        setWrapperSize:                 false,
        virtualTranslate:               false,
        width:                          null,
        height:                         null,
        autoHeight:                     false,
        roundLengths:                   false,
        nested:                         false,
        uniqueNavElements:              true,
        effect:                         'slide',
        runCallbacksOnInit:             true,
        watchOverflow:                  false,
        on:                             null,
        spaceBetween:                   0,
        slidesPerView:                  1,
        slidesPerColumn:                1,
        slidesPerColumnFill:            'column',
        slidesPerGroup:                 1,
        centeredSlides:                 false,
        slidesOffsetBefore:             0,
        slidesOffsetAfter:              0,
        normalizeSlideIndex:            true,
        centerInsufficientSlides:       false,
        grabCursor:                     false,
        touchEventsTarget:              'container',
        touchRatio:                     1,
        touchAngle:                     45,
        simulateTouch:                  true,
        shortSwipes:                    true,
        longSwipes:                     true,
        longSwipesRatio:                0.5,
        longSwipesMs:                   300,
        followFinger:                   true,
        allowTouchMove:                 true,
        threshold:                      0,
        touchStartPreventDefault:       true,
        touchStartForcePreventDefault:  false,
        touchMoveStopPropagation:       true,
        iOSEdgeSwipeDetection:          false,
        iOSEdgeSwipeThreshold:          20,
        touchReleaseOnEdges:            false,
        passiveListeners:               true,
        resistance:                     true,
        resistanceRatio:                0.85,
        preventInteractionOnTransition: false,
        allowSlidePrev:                 true,
        allowSlideNext:                 true,
        noSwiping:                      true,
        noSwipingClass:                 'swiper-no-swiping',
        noSwipingSelector:              null,
        swipeHandler:                   null,
        preventClicks:                  true,
        preventClicksPropagation:       true,
        slideToClickedSlide:            false,
        freeMode:                       false,
        freeModeMomentum:               true,
        freeModeMomentumRatio:          1,
        freeModeMomentumVelocityRatio:  1,
        freeModeMomentumBounce:         true,
        freeModeMomentumBounceRatio:    1,
        freeModeMinimumVelocity:        0.02,
        freeModeSticky:                 false,
        watchSlidesProgress:            false,
        watchSlidesVisibility:          false,
        preloadImages:                  true,
        updateOnImagesReady:            true,
        loop:                           false,
        loopAdditionalSlides:           0,
        loopedSlides:                   null,
        loopFillGroupWithBlank:         false,
        breakpoints:                    null,
        breakpointsInverse:             false,
        observer:                       false,
        observeParents:                 false,
        containerModifierClass:         'swiper-container-',
        slideClass:                     'swiper-slide',
        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',
        navigation:                     null,
        nextEl:                         null,
        prevEl:                         null,
        hideOnClick:                    false,
        disabledClass:                  'swiper-button-disabled',
        hiddenClass:                    'swiper-button-hidden',
        pagination:                     null,
        el:                             null,
        type:                           'bullets',
        bulletElement:                  'span',
        dynamicBullets:                 false,
        dynamicMainBullets:             1,
        hideOnClick:                    true,
        clickable:                      false,
        progressbarOpposite:            false,
        formatFractionCurrent:          number => number,
        formatFractionTotal:            number => number,
        renderBullet:                   null,
        renderFraction:                 null,
        renderProgressbar:              null,
        renderCustom:                   null,
        bulletClass:                    'swiper-pagination-bullet',
        bulletActiveClass:              'swiper-pagination-bullet-active',
        modifierClass:                  'swiper-pagination-',
        currentClass:                   'swiper-pagination-current',
        totalClass:                     'swiper-pagination-total',
        hiddenClass:                    'swiper-pagination-hidden',
        progressbarFillClass:           'swiper-pagination-progressbar-fill',
        clickableClass:                 'swiper-pagination-clickable',
        scrollbar:                      null,
        el:                             null,
        hide:                           true,
        draggable:                      false,
        snapOnRelease:                  false,
        dragSize:                       'auto',
        lockClass:                      'swiper-scrollbar-lock',
        dragClass:                      'swiper-scrollbar-drag',
        autoplay:                       null,
        delay:                          3000,
        stopOnLastSlide:                false,
        disableOnInteraction:           true,
        reverseDirection:               false,
        waitForTransition:              true,
        parallax:                       false,
        lazy:                           null,
        loadPrevNext:                   false,
        loadPrevNextAmount:             1,
        loadOnTransitionStart:          false,
        elementClass:                   'swiper-lazy',
        loadingClass:                   'swiper-lazy-loading',
        loadedClass:                    'swiper-lazy-loaded',
        preloaderClass:                 'swiper-lazy-preloader',
        fadeEffect:                     null,
        crossFade:                      false,
        coverflowEffect:                null,
        slideShadows:                   true,
        rotate:                         50,
        stretch:                        0,
        depth:                          100,
        modifier:                       1,
        flipEffect:                     null,
        slideShadows:                   true,
        limitRotation:                  true,
        cubeEffect:                     null,
        slideShadows:                   true,
        shadow:                         true,
        shadowOffset:                   20,
        shadowScale:                    0.94,
        thumbs:                         null,
        swiper:                         null,
        slideThumbActiveClass:          'swiper-slide-thumb-active',
        thumbsContainerClass:           'swiper-container-thumbs',
        zoom:                           null,
        maxRatio:                       3,
        minRatio:                       1,
        toggle:                         true,
        containerClass:                 'swiper-zoom-container',
        zoomedSlideClass:               'swiper-slide-zoomed',
        keyboard:                       false,
        enabled:                        false,
        onlyInViewport:                 true,
        mousewheel:                     false,
        forceToAxis:                    false,
        releaseOnEdges:                 false,
        invert:                         false,
        sensitivity:                    1,
        eventsTarged:                   'container',
        virtual:                        null,
        slides:                         [],
        cache:                          true,
        renderSlide:                    null,
        renderExternal:                 null,
        addSlidesBefore:                0,
        addSlidesAfter:                 0,
        hashNavigation:                 null,
        watchState:                     false,
        replaceState:                   false,
        history:                        null,
        replaceState:                   false,
        key:                            'slides',
        controller:                     null,
        control:                        undefined,
        inverse:                        false,
        by:                             'slide',
        a11y:                           null,
        enabled:                        true,
        prevSlideMessage:               'Previous slide',
        nextSlideMessage:               'Next slide',
        firstSlideMessage:              'This is the first slide',
        lastSlideMessage:               'This is the last slide',
        paginationBulletMessage:        'Go to slide {{index}}',
        notificationClass:              'swiper-notification'
    });
});

Leave a Reply

Top