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>