🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

jetslider is a fancy, touch-enabled jQuery slider plugin for smoothly transitioning between page slides that interact with mouse scroll and/or keyboard arrows.

page-slider

Documentation

jetSlider

Simple plugin for making beautiful page transitions

Demo

Fullpage | Inline

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


You May Also Like