Super Tiny jQuery Responsive Image Slideshow Plugin

An ultra-lightweight, fully responsive, cross-browser image slideshow with autoplay functionality and simple fade transitions, built with jQuery, CSS and 10 lines of javascript codes.

How to use it:

1. Include the latest version of jQuery library directly from Google CDN.

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

2. Create the html structure for an image slideshow.

<ul class="slideshow">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
...
</ul>

3. The required CSS for the image slideshow.

.slideshow {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.slideshow li {
display: none;
float: left;
margin: 0 -100% 0 0;
width: 100%;
}
.slideshow li:first-child {
display: block;
}
.slideshow img {
max-width: 100%;
vertical-align: top;
}

4. The javascript.

<script>
(function($){
var slideInterval = 2000,
fadeDuration = 600,
$slideshow = $('.slideshow');
setInterval(function(){
var $slides = $slideshow.children();
$slides.eq(0).fadeOut(fadeDuration, function(){
$(this).appendTo($slideshow);
});
$slides.eq(1).fadeIn(fadeDuration);
}, slideInterval);
})(jQuery);
</script>

---

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