Slick and Accessible Slideshow Using jQuery - Free

Setting the foundations

The most important part of any good web component is a solid HTML structure. A semantic foundation means that your content will be web accessible in virtually all browser clients.

Our content’s structure involves a div called #slideshow that serves as the container for our slideshow. Nested inside it is another div called #slideContainer that holds the slides, which are divs with a class set to .slide.

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.