Possibly the most simple jQuery Slider

Do you have jQuery in your site or blog and space to insert 10 lines of code? If the answer is yes, and you want to have an automatic slideshow, this is the simplest code I've seen so far. So, having a succession of images added inside a box with a common general container, would give this result:

- as a gadget: go to Layout, click "Add a gadget" and choose the "HTML/JavaScript" option
- inside a post/page: create a new post and paste the code inside the HTML box.

So this is all you need. For me, it is quite lightweight and efficient, much more than most libraries that are used nowadays - perhaps, too often.

jQuery Slider Settings

The last three numbers of this slider will allow us to adjust some things. All of them are expressed in milliseconds (4000 = 4 seconds):

fadeOut(0): Time for the outgoing image
fadeIn(1000): Time for the next image
('#slider');},4000): Time spent in each image

How it Works

$('#slider div:gt(0)').hide();
Withgt(x)we select all the divs from the number (x). In this case, 0 is the first, so what this line does is to hide (hide()) all the boxes - except the first, that will be the image visible initially.

setInterval(function(){ [what we will do] }, 4000);
We need to reiterate a few things from time to time and we can accomplish this withsetInterval - the delay time between each set.

$('#slider div:first-child').fadeOut(0)
Within each of these intervals, we remove (fadeOut) the first box (div:first-child) with a fade out effect, so that images are out of visibility...

.next('div').fadeIn(1000)
...and make the following box (next) to appear gradually (fadeIn).

.end().appendTo('#slider');
Finally, this will show the first image and will move it to the end(appendTo) of the "list".

end()resets the number of elements that we move forward with next(). Thus, the first child made earlier to disappear, is the one that is sent down the stack, and not the image that is currently visible.

3. Customizing the Slider

Even though, we don't need CSS to make the slider work, we can still change its look to display images in different sizes, include captions, or even improve the transition. Here are some ideas:

Text 1

Text 2

Text 3

This is a long text 4

In the above example, we limited the size of the container and prevented the overflow of larger images. Finally, we added rounded borders and centered the slider.

If we would have made the parent box of the images positioned absolutely, they would have overlapped each other. For this reason, we have set the "position" of the container to "relative".

As for the images, we will set the width to 100% to make them fill the entire container and the min-height to 300px, to fill up all the available height of the parent box, so that there will be no empty space around them.

To add more elements like a text or caption, we will enclose the text in span tags and will set the position to "absolute". And to make the text appear at the bottom of the image, we will use the bottom property: