jQuery.HSlider
A Full-Page Scrolling, Touch-Friendly jQuery Slider
- Create an Full-Page Scrolling web slider has never been so easy
- All animations are powered by CSS3 with GPU acceleration
- Page Index now powered by URL hash for URL Sharing
- For mobile or modern desktop browser
Live Demo #### [Mobile Weather-App Demo →](http://huangxuan.me/jquery.HSlider/demo-weather-app/)
Desktop Gallery Demo →
Document
Get Started
import styles and scripts
<link rel="stylesheet" type="text/css" href="style/reset.css"> <!--recommended--> <link rel="stylesheet" type="text/css" href="style/hslider.css"> <!--essential--> <link rel="stylesheet" type="text/css" href="style/default-style.css"> <!--optional--> <script type="text/javascript" src="jquery-2.0.3.min.js"></script> <script type="text/javascript" src="jquery.HSlider.min.js"></script>
HTML Structure:
<div class="wrap"> <div class="slider"> <section> <article> <h1> Title </h1> <article> <img src="yourimage.jpg"> </section> <section> <!-- same --> </section> </div> </div>
Init HSlider!
// deathly simple! $(".slider").HSlider();
HSlider Options
use options:
$(".slider").HSlider({ easing: "ease-in-out", animationTime: 400, pagination: false });
easing {String}
- The easing function used in page transition. Default value is
ease
animationTime {Number}
- The duration used for page transition. Default value is
1300
pagination {Boolean}
- Auto generate pagination or not. Default value is
true