https://github.com/micmro/mswipeslider
Minimalist, responsive, touch enabled slider developed with performance in mind (size/responsiveness/battery)
https://github.com/micmro/mswipeslider
Last synced: 6 months ago
JSON representation
Minimalist, responsive, touch enabled slider developed with performance in mind (size/responsiveness/battery)
- Host: GitHub
- URL: https://github.com/micmro/mswipeslider
- Owner: micmro
- License: mit
- Created: 2014-04-15T01:52:08.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2014-05-13T03:52:27.000Z (about 12 years ago)
- Last Synced: 2024-12-29T18:21:09.346Z (over 1 year ago)
- Language: JavaScript
- Size: 359 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
MSwipeSlider
==============
Minimalist, responsive, touch enabled slider developed with performance in mind (size/responsiveness/battery).
*Features:*
- small _(<2kb gzip)_
- responsive _(also handels reflows/resizes)_
- touch and mouse faux-touch
- GPU exelerated _(via CSS transforms)_
- AMD/CommonJS/jQueryPlugin support
Tested in Chrome, FF, IE8+, Opera, Android Chrome and iOS
MSwipeSlider depends on jQuery and has a soft dependency on Modernizr for feature detection that can be overwritten through `supportsCsstransitions` and `supportsCsstransforms`
Demo
----
http://lab.michaelmrowetz.com/mswipeslider
Using MSwipeSlider
------------------
Initializing MSwipeSlider with settings (all optional):
```JavaScript
$(".mSwipe").mSwipeSlider({
onFinishedSetup : function(mSwipeSlider, el){
console.log("ready captain", mSwipeSlider, el);
}, // callback executed when MSwipeSlider is initiallized
duration : 250, // animation duration for slide movement in ms (1000ms = 1sec)
pagingTouchLength : 200, // px length needed to move slide
supportsCsstransitions : true, // overwrite Modernizr default
supportsCsstransforms : true // overwrite Modernizr default
});
```
_The demo includes [jquery-requestAnimationFrame](https://github.com/gnarf/jquery-requestAnimationFrame) as a requestAnimationFrame fill, and [Modernizr](http://modernizr.com/) for feature detection but it works without them._
How to run this repo via Grunt
-------------------------
To work on the slider leveraging a static file server and automatic reload or to uglify the file.
- Install grunt
```
npm install -g grunt-cli
```
- cd into directory and
```
grunt
```