jetSlider
Simple plugin for making beautiful page transitions
Demo
Options
| Option | Type | Default | Description |
|---|---|---|---|
| slideSelector | String | 'section' |
Selector of the slide elements |
| transitionDuration | Number | 800 |
Duration of transition between slides |
| scroll | Boolean | true |
Changing slides by mouse scroll |
| keyboard | Boolean |
true if parent element is <body>. Else false
|
Changing slides by keyboard arrows |
| easing | String | 'ease-in-out' |
Easing function e.g. 'linear', 'ease-in', 'cubic-bezier(0.42,0,0.58,1)'... |
| onBeforeMove | Function | null |
Function which will be called with newIndex and oldIndex arguments every time when animation starts |
| onAfterMove | Function | null |
Function which will be called with newIndex and oldIndex arguments every time when animation ends |
| jsFallback | Boolean | true |
If true js fallback will be used for animations in browsers which don't support css transorms and transitions. If false slides will change without animation in those browsers |
Options can be changed after initialization:
$('.slider').jetSlider(optionName, value);Methods
$('.slider').jetSlider('moveto', index);$('.slider').jetSlider('moveup');$('.slider').jetSlider('movedown');$('.slider').jetSlider('destroy');Like declarative initialization?
You can initialize plugin without js code! Just add data-jetslider attribute to slider container.
Options can be customized by using data-* attributes:
<div class="main" data-jetslider data-slide-selector=".page" data-transition-duration="2000" data-easing="ease-in">
<section class="page">
...
</section>
...
<section class="page">
...
</section>
...
</div>License
MIT License © dvhb
