Responsive Infinite Carousel jQuery Plugin - jQuery slippity

slippity is a fresh new and lightweight jQuery plugin for creating a responsive content slider with infinite loop support and arrows & dots navigation.

How to use it:

1. Wrap your slide items in a wrapper container.

<div id="my-slider" class="slider"> 
<a class="left arrow"></a><a class="right arrow"></a>
<div class="slide active"> <img src="http://lorempixel.com/900/500/people/1"> </div>
<div class="slide"> <img src="http://lorempixel.com/900/500/nature/1"> </div>
<div class="slide"> <img src="http://lorempixel.com/900/500/fashion/1"> </div>
</div>

2. The required CSS to style the carousel slider and its controls.

.slider {
overflow: visible !important; /* Have to add this due to jQuery adding overflow:hidden */
position: relative;
}
.slider img {
display: block;
width: 100%;
}
.slider .slide {
display: none;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
.slider .slide.active {
display: block;
opacity: 1;
}
.slider .arrow {
background: url(slider-arrows.png) no-repeat;
cursor: pointer;
display: block;
margin-top: -50px;
position: absolute;
top: 50%;
width: 50px;
height: 100px;
z-index: 100;
}
.slider .arrow.left {
left: 20px;
}
.slider .arrow.right {
right: 20px;
background-position: -50px 0;
}
.slider .dots {
position: absolute;
bottom: -35px;
text-align: center;
width: 100%;
}
.slider .dots a {
background: #000;
border-radius: 4em;
display: inline-block;
margin: 0 10px;
opacity: 0.6;
text-indent: -9999px;
width: 15px;
height: 15px;
}
.slider .dots a.active, .slider .dots a:hover {
opacity: 1;
}

3. Load the jQuery library and jQuery slippity plugin in the bottom of your page to save your bandwidth.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.slippity.js"></script>

4. Call the plugin on the wrapper with default settings.

<script>
$(document).ready(function(){
$("#my-slider").slippity();
});
</script>

5. Customization.

<script>
$(document).ready(function(){
$("#my-slider").slippity({
arrowClass: ".arrow", // the selector for arrows navigation.
slideClass: ".slide", // the selector for slide items.
dynamicHeight: true, // dynamiclly set the height of your images
animationTime: 500, // the delay time between slides. 
start: function(){}, // callback
end: function(){}}); // callback
});
</script>

---

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