In this in-depth web development tutorial, you'll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you'll see the concept of Progressive Enhancement in action.

Final Result

Clicking on the image below will take out to a Live demonstration of the slideshow widget in action.

Download source files

You can download the source files for this tutorial to study. Along with the entire jQuery script used in this tutorial, the source file package also contains a PSD file named mockup-slideshow.psd for the web layout of the demonstration page, as well as the CSS background images and additional auxiliary files used to create the slideshow.

• slick_accessible_slideshow.zip (ZIP, 2.8 MB)