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.
We'll require the jCarousel plugin from http://sorgalla.com/projects/jcarousel/, along with the jQuery core library.
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...