Tutorial to Make Slideshow With CSS3 and Jquery

Creating a Slideshow With Css and Jquery is easy and not as difficult as imagined, in this tutorial we will briefly discuss how to make it.

A slide show is a presentation of a series of still images on a projection screen device or electronic display, usually in a prearranged order. Each image is usually displayed for at least a few seconds, and sometimes for several minutes, before being replaced by the next image.


There are 2 slideshow models that we will create here:

Opacity Slideshow (the process of changing images that disappear slowly and alternately).
Flip Slideshow (change process shifts sideways).
Opacity Slideshow
Opacity Slideshow will show the effect of changing images that slowly disappear and are replaced with new images, this can be made by using the opacity set with css.

HTML Structure

Figure 1 Picture 2 Picture 3 Picture 4

div#twd_opa is used to hold the image, while p#twd_opa_controls is used to specify a clickable button to change the image.