Swipe

Swipe is the most accurate touch slider. It is extremely lightweight (only 6kb minified) and works across all browsers, including IE8+.

Support both React.js and Angular.js(v1)

Note

This repo is a continuation of the dead Swipe project. Our mission is to keep Swipe alive and moving forward, with maintenance fixes and new features. Pull Requests are welcome!

Usage

Preview

Thanks to @loup-brun

Installation

NPM

npm i swipejs

Yarn

yarn add swipejs

See the online example for a simple demo.

Import in your project

ES5

const Swipe = require('swipejs');

ES6 and newer

import Swipe from 'swipejs';

Markup

Swipe requires just a few lines of markup. Here is an example:

<div id="slider" class="swipe">
  <div class="swipe-wrap">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Above is the initial required structure– a series of elements wrapped in two containers. Place any content you want within the items. The containing div will need to be passed to the Swipe function like so:

Style

Swipe requires the following styles to be added to your stylesheet:

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}

Javascript

You may initialize a Swipe slider with only one line of javascript code:

window.mySwipe = new Swipe(document.getElementById('slider'));

I always place this at the bottom of the page, externally, to verify the page is ready.

Options

Swipe can take an optional second parameter – an object of key/value settings:

Example

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 0,
  speed: 400,
  auto: 3000,
  draggable: false,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  ignore: ".scroller",
  callback: function(index, elem, dir) {},
  transitionEnd: function(index, elem) {}
});

API

A Swipe instance exposes the following public methods:

Supports

Browser Support

Swipe is now compatible with all browsers, including IE7+. Swipe works best on devices that support CSS transforms and touch events, but can be used without these as well. A few helper methods determine touch and CSS transition support and choose the proper animation methods accordingly.

React Support

Please go to react swipe plugin, or check the example

Angular(V1) Support

Please go to angular swipe plugin for source code and usage example.

Who's using Swipe

Send me a note if you want your logo here

License

The MIT License (MIT).