Issue with "ScrollLeft" animation using jquery

In my recent attempt to build a site with horizontal parallax (sites with multiple moving backgrounds..eg: http://www.liptonicetea.pl/), i came across an issue where my code would only work in chrome but not in other browsers.
After searching on google i came across some articles stating same issue. I was able to resolve it by changing the selector i was using for the animation.
Earlier i was using

$(window).animate({"scrollLeft":1100},1500)


I changed it to


$("html,body").animate({"scrollLeft":1100},1500)


and now my code works perfectly fine across all the browsers.

Creating Simple Image Slider Jquery Plugin

Today we will see how to create a simple image slider plugin using jquery. The demo can be seen here

demo: http://designmantra.x10.mx/labs/imageslider/

In here i will be explaining the logic used to build this.


Step 1: Assign css styling to the images which will be part of the slideshow. we will be positioning them absolutely positioning them and adding setting there display property to none.

Step 2: Then set the image display property to block for image you want show.

Step 3: We set a timer of 7 seconds after which jquery will check whether the active image is the last image or not.
If not the last image it will change the display property of next image to block and set display property to none for current image.
If its last image the it will change the display property of the 1st image.

We have also given 2 user controls by which user can move back and forth within these images. One control is pair of arrows that helps you move forward and backward in images.

The next set of controls are image controls which equal to the number of images. On clicking on these you can directly jump to any image.
When user clicks the index value of that element is determined and then the respective image is activated.
Feel free to download the code and experiment

Download code : http://designmantra.x10.mx/labs/imageslider/imageslider.zip