Skip to content

alancasagrande/swipr

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

87 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

a minimal swipe carousel

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 97.0%
  • CSS 1.7%
  • HTML 1.3%