Ajax Coin Slider: A jquery image slider with asynchronous image loading
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.
View the live demo at the Yawd website.
Figure 1. Ajax coin slider - screenshot from the yawd website
For the html code, you only need to specify the
div, where the slider will be loaded.
<div id="coin-slider" ></div>
Finally, call the ajax coin slider, specifying your images as follows:
width: 565, // width of slider panel height: 290, // height of slider panel spw: 7, // squares per width sph: 5, // squares per height delay: 3000, // delay between images in ms sDelay: 30, // delay beetwen squares in ms opacity: 0.7, // opacity of title and navigation titleSpeed: 500, // speed of title appereance in ms effect: '', // random, swirl, rain, straight navigation: true, // prev next and buttons links : true, // show images as links hoverPause: true, // pause on hover content:  //the image array