Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lyfeyaj/Swipe
Swipe is the most accurate touch slider. Support both React and Angular.
https://github.com/lyfeyaj/Swipe
angular mobile react slide swipe
Last synced: 6 days ago
JSON representation
Swipe is the most accurate touch slider. Support both React and Angular.
- Host: GitHub
- URL: https://github.com/lyfeyaj/Swipe
- Owner: lyfeyaj
- License: mit
- Created: 2015-02-04T08:05:18.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-10-17T02:03:41.000Z (about 1 year ago)
- Last Synced: 2024-11-06T14:59:49.118Z (6 days ago)
- Topics: angular, mobile, react, slide, swipe
- Language: JavaScript
- Homepage: https://swipe.js.org
- Size: 2.06 MB
- Stars: 965
- Watchers: 19
- Forks: 186
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Swipe
=====
[](https://travis-ci.org/lyfeyaj/swipe)
[](https://badge.fury.io/js/swipejs)
[]()
[](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
[](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:[email protected]) if you want your logo here
## License
[The MIT License (MIT)](http://opensource.org/licenses/MIT).