While working on my latest project, I was in need for a jquery slider capable of loading images asynchronously. When you run a big website with heavy pages and you need a slider with, say, 10 slide images, you are in trouble. Let's do the math: Suppose each image is sized 100KB, then you need to put an extra weight of 1MB to your homepage! Traditionally, image sliders load all images from the html code and as soon as the page loads, a javascript comes in to make the magic happen. This means that a user must wait a long time before the webpage loads. Moreover, it is always better to display content on demand rather than pre-load it. It saves you from the extra bandwith and lets the web server breathe!

Since I could not find a slider to meet my requirements and look fresh and sexy, I decided to get involved and modify a already established solution. Coin Slider, originally developed by Ivan Lazarevic, was one of the implementations that got my attention. It has really good-looking effects, it is written in jquery, comes with cool theming right out-of-the-box and is really easy to use. I implemented the lazy image loading, made the necessary refactoring and uploaded the new plugin here, in case someone needs it.

Download the attached ajax coin slider code, at the end of this article.

Available options

width:565,// width of slider panelheight:290,// height of slider panelspw:7,// squares per widthsph:5,// squares per heightdelay:3000,// delay between images in mssDelay:30,// delay beetwen squares in msopacity:0.7,// opacity of title and navigationtitleSpeed:500,// speed of title appereance in mseffect:'',// random, swirl, rain, straightnavigation:true,// prev next and buttonslinks :true,// show images as linkshoverPause:true,// pause on hovercontent:[] //the image array