Fullscreen Page Slider Plugin For jQuery - PageSwitch
File Size: | 7.02 KB |
---|---|
Views Total: | 4396 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
PageSwitch is a lightweight, responsive, fullscreen page slider when the users are able to switch between sectioned pages via mouse wheel, keyboard arrows or by clicking on the pagination bullets.
How to use it:
1. Add a group of page sections to the webpage as follows:
<div id="container" data-PageSwitch> <div class="sections"> <div class="section" id="section0"> <h3>This is the Page</h3> </div> <div class="section" id="section1"> <h3>This is the Page</h3> </div> <div class="section" id="section2"> <h3>This is the Page</h3> </div> <div class="section" id="section3"> <h3>This is the Page</h3> </div> </div> </div>
2. Make the page sections fullscreen whenever you resize the browser window.
#container, .sections, .section { height: 100%; width: 100%; } .sections { position: absolute; }
3. Put jQuery library and the main JavaScript file page.js
at the bottom of the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="js/page.js"></script>
4. Initialize the plugin to generate a default vertical page slider.
$("#container").PageSwitch()
5. Apply custom styles to the slider controls.
.pages { position: fixed; list-style: none; } .vertical.pages { right: 15px; top: 50%; } .horizontal.pages { left: 50%; bottom: 15px; } .pages li { width: 8px; height: 8px; border-radius: 50%; background: #fff; margin: 10px 5px; cursor: pointer; } .horizontal.pages li { display: inline-block; vertical-align: middle; } .pages li.active { width: 14px; height: 14px; border: 2px solid #fffe00; margin: 10px 0px 10px 5px; background: none; margin-left: 0; }
6. Default plugin options.
$("#container").PageSwitch({ // CSS selectors selectors: { sections: ".sections", section: ".section", page: ".pages", active: ".active" }, // index index: 0, // easing function easing: "ease", // duration in ms duration: 500, // infinite loop loop: false, // shows pagination pagination: true, // enables keyboard interactions keyboard: true, // or 'horizontal' direction: "vertical", // callback function callback: "" })
This awesome jQuery plugin is developed by Hasyou99. For more Advanced Usages, please check the demo page or visit the official website.