Basic Content Scroller / Slider Plugin For jQuery - BoxSlider

BoxSlider is a simple, small jQuery plugin for creating a basic, smooth content scroller / slider that supports both vertical and horizontal scrolling. 

How to use it:

1. Import jQuery library and the jQuery boxslider plugin into your web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery-boxSlider.js"></script>

2. Create a basic vertical content scroller with up / down slider controls as follow.

<div class="box-slider" id="slider-vertical"> 
    <a href="#" class="box-slider-seta-up"><span></span>
    </a>
    <div class="box-slider-content">
      <div class="box-slider-move">
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item last-item"><span></span></div>
        <div class="clear"></div>
      </div>
    </div>
    <a href="#" class="box-slider-seta-down"></a> 
</div>

3. Style the content scroller in the CSS.

#slider-vertical.box-slider .box-slider-seta-up {
  display: block;
  height: 30px;
  background: url(img/seta-up.png) no-repeat center center #674172;
  margin: 0 5px;
}

#slider-vertical.box-slider .box-slider-seta-down {
  display: block;
  background: url(img/seta-down.png) no-repeat center center #674172;
  height: 30px;
  margin: 0 5px;
}

#slider-vertical.box-slider .box-slider-content {
  height: 415px;
  margin: 10px 0;
  overflow: hidden;
  width: 100%;
}

#slider-vertical.box-slider .box-slider-move {
  position: relative;
  top: 0;
  left: 0;
}

#slider-vertical.box-slider .item {
  width: 33.3%;
  float: left;
}

#slider-vertical.box-slider .item span {
  display: block;
  height: 200px;
  background-color: #AEA8D3;
  margin: 5px 5px;
}

#slider-vertical.box-slider .last-item span {
  background-color: red;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
}

4. Initialize the plugin.

$("#slider-vertical").boxSlider({orientation:"vertical"});

5. Default options.

// animation speed
speed: 1,

// horizontal or vertical
orientation: false,

// callbacks
added function() {},
destroyed: function(){},

---

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