Minimalist Image Scroller/Slideshow Plugin with jQuery

A dead simple horizontal JS image scroller/slideshow that has the ability to show multiple images at one time. jQuery library is required for fade animations when new images come in.

How to use it:

1. Create the elements that will be served as the image slideshow container.

<div id="slide_window">
  <ul id="slide_display">
  </ul>
</div>

2. Create next/prev controls for the image scroller/slideshow. The full markup should be like this:

<!-- prev button --> 
<img class="button-left" src="prev.jpeg"> 

<!-- image slideshow -->
<div id="slide_window">
  <ul id="slide_display">
  </ul>
</div>

<!-- next button --> 
<img class="button-right" src="next.jpeg"> 

3. Include the latest version of jQuery and JS Dynamic Slider plugin at the bottom of your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="image.js" type="text/javascript"></script>

4. Add an array of images and set global variables at the beginning of the image.js.

var imgURLs = ['0.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
var slideWindow = document.getElementById('slide_window'); 
var slideDisplay = document.getElementById('slide_display');
var index = 0; //measures index position within slideshow 
var numSlides = Number(5);  //# of images shown at one time in slideshow

5. The sample CSS to style the image scroller/slideshow.

#slide_window {
  margin: 15px;
  float: left;
  border: 2px solid #DADAE7;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 2px 2px 3px #888888;
}

#slide_window > ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#slide_window > ul > li {
  float: left;
  margin: 10px;
}

.button-left {
  cursor: pointer;
  float: left;
  margin-top: 100px;
}

.button-right {
  cursor: pointer;
  float: left;
  margin-top: 100px;
}

---

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