Basic jQuery Image Carousel/Slider Plugin

A simplest jQuery image carousel/slider plugin that cycles through a group of image with a basic slide animation.

How to use it:

1. Include the latest version of jQuery library on your web page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>

2. Create a simple image carousel/slider using Html unordered list.

<div class="slider">
<ul>
<li><img src="img/img1.gif" alt="image"></li>
<li><img src="img/img2.gif" alt="image"></li>
<li><img src="img/img3.gif" alt="image"></li>
...
</ul>
</div>

3. Add the following Javascript snippets into your existing JS file or include the main.js file directly.

function Slider(option) {
"use strict";

var setting = {
container: ".slider ul", 
nav: "#slider-nav"
};

var el = $.extend({}, setting, option);
this.setVars(el);
this.init();
}

Slider.prototype = {

setVars: function(el){
var base = this;
base.container = $(el.container);
base.nav = $(el.nav).show();
base.imgs = this.container.find("img");
base.imgsLen = this.imgs.length;
base.imgsWidth = this.imgs.eq(0).width();
},

init: function () {
var base = this;
base.nav.find("button").on("click", function () {
base.setCurrent($(this).data("dir"));
base.setAnimate();
});
},

setCurrent: function (dir) {

var pos = this.current;

var commandTable = {
next: function () { return pos += ~~ (dir === 'next') },
prev: function () { return pos += -1 } 
};

pos = (isNaN(dir)) ? commandTable[dir]() : dir - 1;

this.current = (pos < 0) ? this.imgsLen - 1 : pos % this.imgsLen;

},

setAnimate: function (coords) {
this.container.animate({
"margin-left": coords || -(this.current * this.imgsWidth)
});
}

}; // end of prototype

$(function () {
//object instantiation type
var slider = new Slider({
container: ".slider ul",
nav: "#slider-nav"
});
});

4. Style the image carousel/slider via CSS however you like.

#slider-nav {
display: none;
margin-top: 1em;
}
#slider-nav button {
padding: 1em;
margin-right: 1em;
border-radius: 10px;
cursor: pointer;
}
.slider {
width: inherit;
height: 300px;
overflow: hidden;
}
.slider ul {
width: 10000px;
list-style: none;
}
.slider li {
float: left;
}

---

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