Basic Fullscreen Scrolling & Carousel Plugin - jQuery Page Slide
File Size: | 8.75 KB |
---|---|
Views Total: | 4207 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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:
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.