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
