Swipe ===== [![Build Status](https://travis-ci.org/lyfeyaj/swipe.svg?branch=master)](https://travis-ci.org/lyfeyaj/swipe) [![npm version](https://badge.fury.io/js/swipejs.svg)](https://badge.fury.io/js/swipejs) [![npm](https://img.shields.io/npm/dt/swipejs.svg)]() [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/lyfeyaj/swipe/master/LICENSE.md) > 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](https://github.com/thebird/Swipe) project. Our mission is to keep Swipe alive and moving forward, with maintenance fixes and new features. Pull Requests are welcome! ## Usage ### Preview [![Preview Image](docs/images/preview.png)](https://swipe.js.org) Thanks to [@loup-brun](https://github.com/loup-brun) ### Installation #### NPM ```bash npm i swipejs ``` #### Yarn ```bash yarn add swipejs ``` See the [online example](https://swipe.js.org) for a simple demo. ### Import in your project #### ES5 ``` js const Swipe = require('swipejs'); ``` #### ES6 and newer ``` js import Swipe from 'swipejs'; ``` ### Markup Swipe requires just a few lines of markup. Here is an example: ``` html

``` 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: ``` css .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: ``` js 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: | Options | Type | Default | Description | |---------------------|----------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | **startSlide** | Integer | 0 | index position at which Swipe should start. | | **speed** | Integer | 300 | speed of prev and next transitions in milliseconds. | | **auto** | Integer | 0 | when specified, start an auto-playing slideshow (time in milliseconds between slide change). | | **continuous** | Boolean | true | create an infinite feel with no endpoints. | | **autoRestart** | Boolean | false | auto restart slideshow after user's touch event or next/prev calls. | | **disableScroll** | Boolean | false | prevent any touch events on this container from scrolling the page. | | **stopPropagation** | Boolean | false | stop event propagation. | | **draggable** | Boolean | false | listen to mouse events in addition to the touch events | | **ignore** | String | null | ignore touch events on any element matching this selector | | **callback** | Function | null | 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** | Function | null | 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). | ### Example ``` js 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: | Methods | Description | |--------------------------|---------------------------------------------------------------------------------------------------------| | `prev()` | slide to the previous slide. | | `next()` | slide to the next slide. | | `getPos()` | return the current slide index position. | | `getNumSlides()` | return the number of slides. | | `slide(index, duration)` | slide to the position matching the `index` (integer) (`duration`: speed of transition in milliseconds). | | `restart()` | restart the slideshow with autoplay. | | `stop()` | stop the slideshow and disable autoplay. | | `setup(options)` | reinitialize swipe with options. | | `disable()` | disable slideshow. | | `enable()` | enable slideshow. | | `kill()` | completely remove the Swipe instance. | ## 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](react), or check the [example](docs/examples/react) ### Angular(V1) Support Please go to [angular swipe plugin](https://swipe.js.org/examples/angular-v1) for source code and usage example. ## Who's using Swipe

Send me a [note](mailto:lyfeyaj@gmail.com) if you want your logo here ## License [The MIT License (MIT)](http://opensource.org/licenses/MIT).

	Stars	Issues	Version	Updated	Created
drag-helper			1.3.6	7 years ago	10 years ago
dragula	21,814	157	3.7.3	4 years ago	9 years ago
interact.js	12,112	68	1.2.8	7 years ago	9 years ago
sortable	1	1	2.0.0	11 years ago	11 years ago
swipejs			2.3.1	3 years ago	9 years ago

drag-helper vs dragula vs interact.js vs sortable vs swipejs

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past