Fullscreen Horizontal Page Slider with jQuery and CSS3 - HSlider

HSlider is a cool jQuery plugin to create a responsive, fullscreen, horizontal page slider with CSS3 transitions and transforms. The plugin automatically generates a fixed side navigation which allows you to scroll through a series of Html content with mouse wheel or mouse click. Great for creating a modern one page scrolling website to present your designs, photos or videos.

How to use it:

1. Load jQuery library and the jQuery HSlider plugin's stylesheet & script in the document.

<link rel="stylesheet" type="text/css" href="style.css">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.HSlider.js"></script>

2. Create a set of content sections for your web page.

<div class="wrap">
  <div class="slider">

    <section>
      <article>
        <h1>Title 1</h1>
        <h2>Description 1</h2>
        <h3>2013.10.1</h3>
      </article>
      <img src="pic/1.jpg" >
    </section>

    <section>
      <article>
        <h1>Title 2</h1>
        <h2>Description 1</h2>
        <h3>2013.10.2</h3>
      </article>
      <img src="pic/2.jpg" >
    </section>

    <section>
      <article>
        <h1>Title 3</h1>
        <h2>Description 3</h2>
        <h3>2013.10.3</h3>
      </article>
      <img src="pic/3.jpg" >
    </section>

    ...

  </div>
</div>

3. Initialize the plugin and done.

$(".slider").HSlider();

4. A few options to custom the page slider.

$(".slider").HSlider({
// jquery easing options
easing:"ease",

// animation speed
animationTime:1300,

// display side navigation
pagination:true,

// display description
description:true
});

Change log:

2015-11-04

• support form, fixed style

2015-10-25

• support form, fixed style

---

This awesome jQuery plugin is developed by Huxpro. For more Advanced Usages, please check the demo page or visit the official website.