Fullscreen Vertical Page Carousel Plugin For jQuery

A lightweight and simple-to-use jQuery plugin used to create a fullscreen, vertically scrolling carousel for your one page scroll web app.

More features:

• Smooth scrolling animation.
• Side navigation.
• Mouse wheel support.
• URL hash support.

How to use it:

1. Put the latest version of jQuery library and the jQuery Vertical Carousal plugin's files into the webpage.

<link rel="stylesheet" href="vertical_carousal.min.css">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="vertical_carousal.min.js"></script>

2. Add pages together with the navigation dots to the webpage.

<div id="myVerticalCarousel" class="vertical-carousel" data-rests-indicators="#navbar-collapse li">
  <ol class="vertical-carousel-indicators hidden-xs">
      <li data-target="#myVerticalCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myVerticalCarousel" data-slide-to="1"></li>
      <li data-target="#myVerticalCarousel" data-slide-to="2"></li>
      <li data-target="#myVerticalCarousel" data-slide-to="3"></li>
  </ol>
  <div class="vertical-carousel-box">
      <div id="a" class="item active">
          <span></span>
          <p>First page</p>
      </div>
      <div id="b" class="item">
          <span></span>
          <p>Second page</p>
      </div>
      <div id="c" class="item">
          <span></span>
          <p>Thirdly page</p>
      </div>
      <div id="d" class="item">
          <span></span>
          <p>Fourthly page</p>
      </div>
  </div>
</div>

3. Apply your own CSS styles to the sectioned pages:

#a { background: blue; }

#b { background: gray; }

#c { background: red; }

#d { background: black; }

4. Enable hash tags that will be appended to the end of your url.

<div id="myVerticalCarousel"
     class="vertical-carousel" 
     data-urlLock="false">

Change log:

2017-01-03

• bugfix

2016-12-28

• CSS update

---

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