jQuery Plugin For Simple Image Scroller - slider.js

slider.js is a multirole jQuery slider plugin that provides a simple way to vertically or horizontally scroll through a set of images on the web page.

Features:

• Autoplay on page loaded.
• Stop on mouse hover.
• Draggable.
• jQuery easing effects.
• Infinite looping.

Basic usage:

1. Include the jQuery library together with slider.js and slider.css in the document.

<link rel="stylesheet" href="css/slider.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/slider.js"></script>

2. Create markup for an image scroller.

<div class="slideFrame" id="demo">
<ul class="slideGuide up">
<li class="slideCell"> <img src="1.jpg" alt="" width="300" height="300">
<p> Description 1 </p>
</li>
<li class="slideCell"> <img src="2.jpg" alt="" width="300" height="300">
<p> Description 2 </p>
</li>
<li class="slideCell"> <img src="3.jpg" alt="" width="300" height="300">
<p> Description 3 </p>
</li>
<li class="slideCell"> <img src="4.jpg" alt="" width="300" height="300">
<p> Description 4 </p>
</li>
<li class="slideCell"> <img src="5.jpg" alt="" width="300" height="300">
<p> Description 5 </p>
</li>
</ul>
</div>

3. Setup the plugin to create an vertical image scroller.

<script>
$(function(){

$("#demo").slider({
direction: "up"
});

});
</script>

4. All the default settings.

<script>
$(function(){

$("#demo").slider({
loop: true, // auto loop
time: 10, 
speed: 1, 
direction: "left", // up, down, left, right
reverse: true, // reverse the direction
auto: true, // autoplay
easing: "linear", // requires jQuery easing plugin
guideSelector: ".slideGuide", 
cellSelector: ".slideCell",
ctrlSelector: ".slideCtrl", 
ctrlClick: false, // click to scroll
ctrlHover: true, // mouse hover to scroll
draggable: false, // draggable
dragCursorOpen: "open.cur", 
dragCursorClose: "close.cur", 
shuttle: false, 
once: false, 
restart: true,
restartTime: 3000, 
pause: true,
build: true, 
sp: 1 // basic animation speed
});

});
</script>

---

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