Fullpage Responsive Carousel Plugin with jQuery - vertslider

vertslider is a jQuery plugin for creating a full-page and responsive carousel slider which allows you to navigate through a set of sections with CSS3 transitions.

See also:

• Stacked One Page Slider with jQuery StickyStack.js
• jQuery Fullscreen Page Slider Plugin - Project Preview
• Powerpoint-like jQuery Full Page Slider Plugin - Simple Slides

Basic Usage:

1. Include the required CSS files in your page's head section.

<link rel="stylesheet" href="css/vertslider.css">
<link rel="stylesheet" href="css/navigation.css">

2. Include jQuery Javascript library and the jQuery vertslider plugin at the end of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script/jquery.vertslider.js"></script>

3. Create the Html for the next/prev controls.

<nav>
  <div class="vertslider-left_nav"></div>
  <div class="vertslider-right_nav"></div>
</nav>

4. Create the Html for the bottom pager.

<div class="vertslider-pager">
  <div class="vertslider-pager-inner-wrapper"> </div>
</div>

5. Create a set of sections as many as you want on the web page.

<div id="vertslider-wrapper">
  <section class="vertslider-page-wrapper">
    <h1>PAGE1</h1>
  </section>
  <section class="vertslider-page-wrapper">
    <h1>PAGE2</h1>
  </section>
  <section class="vertslider-page-wrapper">
    <h1>PAGE3</h1>
  </section>
  <section class="vertslider-page-wrapper">
    <h1>PAGE4</h1>
  </section>
</div>

6. Setup the page slider.

window.startPage = 1;
window.transitionTime = 750;

---

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