alancasagrande / swipr

a minimal swipe carousel

swipr

originally forked from lory.js the touch enabled minimalistic slider written in vanilla JavaScript

just 260 lines of es5 code :) Imagine if we wrote it in es6?

Uses hammer.js so it works the same on the web as on mobile. Swipe or Click...

Installation

npm install swipr --save

Usage

codepen example

• add some html

your container, swipr wrapper element and your li slides with whatever content you like

<div class="swipr_example">
    <div class="swipr">
        <ul class="swipr_slides">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>

<script src="/scripts/bundle.js"></script>

• now some javascript to init the slider

using node / commonJs

Use browserify or webpack to bundle your main file below to bundle.js

    var swipr = require('swipr');
    document.addEventListener('DOMContentLoaded', function () {
        var simple = document.querySelector('.swipr-example');
        swipr(simple);
    });

• you need some minimal css for styling your slides

style.css

License

MIT