Basic Fullscreen Scrolling & Carousel Plugin - jQuery Page Slide

The Page Slide jQuery plugin helps you create responsive, automatic carousel and/or one page scrolling website (page slider) with ease.

Features:

• Supports both horizontal and vertical scrolling.
• Infinite loop.
• Scrolls between pages with mouse wheel.
• Custom trigger events: click or hover.
• Provides a callback function which will be triggered on each scrolling.

More Examples:

• Carousel
• Callback

How to use it:

1. Place the JavaScript file jquery.pageSlide.js after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.pageSlide.js"></script>

2. Create your own slides for the carousel & page slider.

<div class="box">
  <div>
    <div style="background-color: red;">Page1</div>
    <div style="background-color: orange;">Page2</div>
    <div style="background-color: blue;">Page3</div>
    <div style="background-color: yellow;">Page4</div>
  </div>
</div>

3. Initialize the plugin with default settings.

$('.box').pageSlide();

4. A default settings to customize the carousel & page slider.

$('.box').pageSlide({

  // vertical,horizontal
  direction: 'vertical',

  // fullscreen scrolling
  fullPage: true,

  // width/height in pixels
  width: 500,
  height: 500,

  // auto play
  autoSlide: false,

  // infinite scroll
  loop: true,

  // delay in milliseconds
  delay: 3000,

  // duration of animation
  duration: 1000,

  // shows navigation
  navigation: true,

  // mouseover、click
  navigationEvent: 'click',

  // callback
  callback: function () {},
  
});

---

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