Super Tiny jQuery Responsive Image Slideshow Plugin

File Size: 1.51 KB
Views Total: 666
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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>

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.

var slideInterval = 2000,
fadeDuration = 600,
$slideshow = $('.slideshow');
var $slides = $slideshow.children();
$slides.eq(0).fadeOut(fadeDuration, function(){
}, slideInterval);

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