🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

HSlider is a cool jQuery plugin to create a responsive, fullscreen, horizontal page slider with CSS3 transitions and transforms.

One-Page-Scrolling page-slider

Documentation

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

#### [Mobile Weather-App Demo →](http://huangxuan.me/jquery.HSlider/demo-weather-app/)

Desktop Gallery Demo

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

You May Also Like