https://github.com/mhweiner/simpletouchslider
A simple, performant, and lightweight touch slider powered by HammerJS, jQuery, and CSS3 hardware animations.
https://github.com/mhweiner/simpletouchslider
Last synced: 3 months ago
JSON representation
A simple, performant, and lightweight touch slider powered by HammerJS, jQuery, and CSS3 hardware animations.
- Host: GitHub
- URL: https://github.com/mhweiner/simpletouchslider
- Owner: mhweiner
- Created: 2017-12-18T19:03:35.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-29T23:00:46.000Z (over 7 years ago)
- Last Synced: 2024-12-25T22:24:38.589Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 44.9 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SimpleTouchSlider
A simple, performant, and lightweight touch slider powered by HammerJS, jQuery, and CSS3 hardware animations. The slider will apply `display: none` to slides that are not currently within view, which greatly improves performance, especially when dealing with high resolution images.
## Dependencies
* jQuery 1.6+
* HammerJS 2.0.0+ (http://hammerjs.github.io/)
If anyone wants to submit a pull request to convert to a jQuery-free, vanilla JS version, that would be awesome. I just don't have the time right now... PR's welcome!
## Usage
HTML:
```HTML
- Slide 1
- Slide 2
- Slide 3
```
CSS:
```CSS
.sldr {
overflow: hidden;
width: 100%;
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
-webkit-transform-style: preserve-3d;
cursor: auto;
ul{
transform: translate3d(0,0,0) scale3d(1,1,1);
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
overflow: hidden;
-webkit-transform-style: preserve-3d;
position: relative;
height: 100%;
margin: 0;
padding: 0;
li {
display: block;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0,0,0);
width: 100%;
box-sizing: border-box;
position: absolute;
padding: 0;
margin: 0;
top: 0;
left: 0;
}
&.animate{
transition: all .5s;
}
}
}
```
Javascript:
```js
//without options
var sldr = new SimpleTouchSlider($('.sldr'));
//with options
var sldr = new SimpleTouchSlider($('.sldr'), {
infinite: false,
auto_play: false,
onSlideChange: function(index) {
console.log('Slide ' + (index + 1) + ' is showing!');
}
});
```
## Options
* animation_duration (Default: 400) (in milliseconds)
* auto_play (Default: true)
* play_interval (Default: 5000) (in milliseconds)
* onSlideChange (Default: null) Callback.
* infinite (Default: true)
## API
### getCurrentSlide()
Returns current slide position (integer).
### destroy()
Destroys the instance, stops playing, and frees up memory.
### getNumSides()
Returns the number of slides (integer).
### goToSlide(index)
Animates to the specified slide.
### prev()
Animates to the previous slide.
### next()
Animates to the next slide().
### play()
Starts/resumes playing.
### stop()
Stops playing.
### reposition()
Manually recalculate and apply positioning. You may need to use this should you resize the container without a window.resize event being fired.