Transition Between Pages With Scroll, Swipe, And Keyboard - jetslider

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

By default, the smooth transition effects are based on CSS3 animations. It also has a fallback that uses JavaScript animations on legacy browsers.

Check out the FULLSCREEN demo for more details.

More features:

• Supports touch events.
• Slide element with size different than size of window won't break the slider.
• Slide elements can be positioned vertically and horizontally (or even diagonally).
• CSS3 easing functions.

How to use it:

1. Download and insert the JavaScript jquery.jetslider.js into the document. Note that you must first have jQuery library installed.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.jetslider.js"></script>

2. Create page slides following the markup structure like these:

<div class="slider demo">
  <section class="page page1">
    Page 1
  </section>
  <section class="page page2">
    Page 2
  </section>
  <section class="page page3">
    Page 3
  </section>
  ...
</div>

3. Activate the page slider and done.

$('.slider').jetSlider();

4. Override the following options to customize the slider.

$('.slider').jetSlider({

  // selector of slides
  slideSelector: 'section',

  // duration of animation
  transitionDuration: 1000,

  // enables scroll events
  scroll: true,

  // enables keyboard arrows
  keyboard: null,

  // easing function
  easing: 'ease',

  // enable JS fallback for old browsers
  jsFallback: true,

  // callback functions
  onBeforeMove: null,
  onAfterMove: null
  
});

5. You can also initialize the plugin and pass the options via data attributes as these:

<div class="slider demo"
     data-jetslider
     data-slide-selector=".page"
     >
  <section class="page page1">
    Page 1
  </section>
  <section class="page page2">
    Page 2
  </section>
  <section class="page page3">
    Page 3
  </section>
  ...
</div>

6. Possible API methods which can be used to control the slider manually.

// moves to a specific slide
$('.slider').jetSlider('moveto', index);

// moves up
$('.slider').jetSlider('moveup');

// moves down
$('.slider').jetSlider('movedown');

// destroy the plugin
$('.slider').jetSlider('destroy');

---

This awesome jQuery plugin is developed by dvhb. For more Advanced Usages, please check the demo page or visit the official website.