Swipe2 – The most accurate Touch Slider

Swipe2

Swipe2 by lyfeyaj is a continuation of the original but unmaintained Swipe Project. The “Fork” is still really leightweight (6kb minified) and works for all modern and not-so-modern Browsers like the Internet Explorer 7+. Swipe2 is also usable as AMD / UMD / nodeJS module as well as for ReactJS and AngularJS!

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

npm i swipejs --save

yarn add swipejs --save

bower install swipe-js --save

Instructions

The Swipe2 Slider is available as minified and unminified Script file and offers a really basic stylesheet, to get the Slider working. The design itself is completely up to you!

 

Load Swipe2

It’s recommended to load the stylesheet within the HTML <head> element. The example below just writes the required styles (from the included stylesheet) directly in a style element. The JavaScript file can be located wherever your want but we recommend to load it directly after the starting <body> tag.

<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Styles -->
        <style type="text/css">
            .swipe {
                overflow: hidden;
                position: relative;
                visibility: hidden;
            }
            .swipe-wrap {
                overflow: hidden;
                position: relative;
            }
            .swipe-wrap > div {
                float: left;
                width: 100%;
                position: relative;
            }
        </style>
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/swipe.min.js"></script>
        
        <!-- Required HTML Structure -->
        <div id="ws-slider" class="swipe">
            <div class="swipe-wrap">
                <div>Slide #1</div>
                <div>Slide #2</div>
                <div>Slide #3</div>
            </div>
        </div>
    </body>
</html>

 

Configure Swipe2

This Slider / Carousel Library offers some options to configure and extend it’s beavior.

document.addEventListener("DOMContentLoaded", {
    var webSlider = new Swipe(document.querySelector("#ws-slider"), {
        startSlide:         0,
        speed:              300,
        auto:               3000,
        draggable:          false,
        autoRestart:        false,
        continuous:         true,
        disableScroll:      true,
        stopPropagation:    true,
        callback:           function(index, element) {},
        transitionEnd:      function(index, element) {}
    });
});

 

Configure: Options

startSlide
Index position at which Swipe should start.
speed
Speed of prev and next transitions in milliseconds.
auto
When specified, start an auto-playing slideshow (time in milliseconds between slide change).
draggable
Enable mouse drag support in desktop browsers.
autoRestart
Auto restart slideshow after user’s touch event or next/prev calls.
continuous
Create an infinite feel with no endpoints.
disableScroll
Prevent any touch events on this container from scrolling the page.
stopPropagation
Call the Stop event propagation.
callback
Runs at slide change. Three parameters are passed to the function: index (the current slide index), elem (the current slide element) and dir (direction: 1 for left or backward, -1 for right or forward).
transitionEnd
Runs at the end of a slide transition. Two parameters are passed to the function: index (the current slide index) and elem (the current slide element).

Leave a Reply

Top