Vertical Scrolling Image Gallery with jQuery and jQuery UI - Scroll Slider

Scroll Slider is a jQuery & jQuery UI based gallery plugin which allows you scroll through a set of images with thumbnails by dragging the inner scrollbar.

How to use it:

1. Create the scrolling gallery following the Html structure like this:

<div id="scrollSlider">
  <img src="img/1.jpg" alt="1">
  <img src="img/2.jpg" alt="2">
  <img src="img/3.jpg" alt="3">
  ...
</div>

2. The CSS to style the scrolling gallery. Add the following CSS snippet into your existing CSS file or include the style.css directly into the document.

#scrollSlider {
  width: 900px;
  margin: 0 auto;
}

#scrollSlider .scroll-slider-wrapper,
#scrollSlider .thumbnails,
#scrollSlider .scroll-bar {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  height: 600px;
  max-height: 600px;
}

#scrollSlider .scroll-slider-wrapper { width: 70%; }

#scrollSlider .slide {
  width: 600px;
  height: 600px;
  text-align: center;
}

#scrollSlider .thumbnails {
  width: 16%;
  height: 455px;
  margin-top: 70px;
}

#scrollSlider .thumbnails .thumb-image-wrapper {
  margin: 5px;
  overflow: hidden;
  height: 128px;
}

#scrollSlider .thumbnails .thumb {
  position: relative;
  height: 138px;
  width: 138px;
  overflow: hidden;
  border: 1px solid black;
  margin: 10px 0 10px 0;
}

#scrollSlider .thumb .thumb-shadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #131313;
  opacity: 0;
}

#scrollSlider .thumb .thumb-shadow span {
  width: 32px;
  height: 32px;
  background: url("../img/zoom.png") no-repeat 0 0;
  position: absolute;
  bottom: 10px;
  left: 40%;
}

#scrollSlider .thumb .thumb-shadow:hover { opacity: 0.5; }

#scrollSlider .scroll-bar {
  width: 10px;
  border-right: 1px solid black;
  border-left: 1px solid black;
  margin: 0 20px;
  padding: 10px 0;
  position: relative;
}

#scrollSlider .scroll-bar .scroll-button {
  width: 8px;
  height: 80px;
  background-color: black;
  margin: 0 auto;
}

#scrollSlider .slides img {
  display: inline-block;
  max-width: 600px;
  max-height: 600px;
  vertical-align: middle;
}

#scrollSlider .img-middle-helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

3. Include the latest version of jQuery and jQuery UI at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

4. Add the jQuery Scroll Slider plugin's script in the document but after jQuery library.

<script src="scrollSlider.jquery.js"></script>

5. Initialize the plugin with available options.

$('#scrollSlider').scrollSlider({
radius: "20px",
thumbSize : 100,
thumbs: true
});

---

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