Minimal Horizontal Fullpage Slider Plugin With jQuery - pageSlide

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.