Horizontal Content Scroller Plugin with jQuery - Scroll Slider

A basic content scroller/slider which allows you to horizontally scroll through a set of Html elements by mouse wheel or dragging the custom scrollbar generated by the plugin.

How to use it:

1. Link to jQuery library and the JQuery scroll slider plugin.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.scrollslider.js"></script>

2. Insert a set of Html elements into the scroller with a custom scrollbar.

<div id="scrollslider" class="scrollSlider">

  <div class="viewport">
    <div class="overview">
      <img src="https://unsplash.it/600/300?image=56">
      <img src="https://unsplash.it/600/300?image=45">
      <img src="https://unsplash.it/600/300?image=39">
      <img src="https://unsplash.it/600/300?image=40">
      <img src="https://unsplash.it/600/300?image=31">
    </div>
  </div>
  
  <div class="scrollbar">
    <div class="track"></div>
  </div>
  
</div>

3. The basic styles for the scroller.

.scrollSlider div.viewport {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.scrollSlider div.viewport div.overview {
  width: 10000px;
  height: 100%;
}

.scrollSlider div.viewport div.overview img {
  display: block;
  float: left;
  height: 100%;
  margin-right: 5px;
}

.scrollSlider div.viewport div.overview img:last-child { margin-right: 0; }

.scrollSlider div.viewport div.overview:after {
  content: '';
  display: block;
  width: 100%;
  clear: both;
}

.scrollSlider div.scrollbar {
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
  height: 15px;
  background-color: #aaa;
}

.scrollSlider div.scrollbar div.track {
  width: 115px;
  height: 15px;
  background-color: #222;
  cursor: move;
}

4. Initialize the plugin and set the height of the scroller.

$("#scrollslider").scrollSlider({
  height : 300,
  debug: false,
  content : 'img'
});

Change log:

2015-04-24

• Add different content types in options.content attr

2015-03-03

• Add clickable buttons and debug mode

---

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