Minimal Horizontal Fullpage Slider Plugin With jQuery - pageSlide
File Size: | 4.19 KB |
---|---|
Views Total: | 1822 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
pageSlide is a very small jQuery plugin used for generating a horizontal fullscreen page slider with custom CSS3 transition effect to showcase your products or featured web content.
How to use it:
1. Include the jQuery pageSlide plugin's style sheet in the header of the document. Modify or override the styles in the pageSlide.css
to create your own slider styles and transition effects.
<link rel="stylesheet" href="pageSlide.css">
2. Add your own web content to the slider.
<div id="pageWrap"> <div class="page slideLeft"> <div class="intro"> <h1 class="animated bounceInDown">this is page 1</h1> </div> </div> <div class="page slideLeft"> <div class="intro"> <h1 class="animated bounceInDown">page 2</h1> </div> </div> <div class="page slideLeft"> <div class="intro"> <h1 class="animated bounceInDown">page 3</h1> </div> </div> <div class="page slideLeft"> <div class="intro"> <h1>this is page 4</h1> </div> </div> </div>
3. Include jQuery library (Slim build is recommended) and the jQuery pageSlide plugin's script at the end of the document.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="pageSlide.js"></script>
4. Call the function on the top container to initialize the page slider.
$("#pageWrap").pageSlide();
This awesome jQuery plugin is developed by dengweiyong. For more Advanced Usages, please check the demo page or visit the official website.