Creating an image slider
Displaying images in a page as photo albums, features, screenshots, and so on are a common requirement in most websites. Displaying images in a slider with some effects will spice it up and would make the website "Ajaxified". To provide such effects and have a better finish, there are lot of jQuery plugins. In this recipe, we'll see how to display an image slider using the jCarousel plugin.
Getting ready
We'll require the jCarousel plugin from http://sorgalla.com/projects/jcarousel/, along with the jQuery core library.
How to do it...
It is enough to use the normal HTML markup—images in an unordered list—to get a photo listing. In order to hook the jCarousel plugin to the unordered list, we have set the id
. To set the theme, we have set class to jcarousel-skin-ie7
.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet...