Swipe2 – The most accurate Touch Slider


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


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>
        <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;
        <!-- 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>


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

Index position at which Swipe should start.
Speed of prev and next transitions in milliseconds.
When specified, start an auto-playing slideshow (time in milliseconds between slide change).
Enable mouse drag support in desktop browsers.
Auto restart slideshow after user’s touch event or next/prev calls.
Create an infinite feel with no endpoints.
Prevent any touch events on this container from scrolling the page.
Call the Stop event propagation.
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).
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