Description:
So, in this tutorial I’ll explain a simple step-by-step way to implement an picture player slider with horizontal scrolling and animated effects using JQUERY and CSS.
Samples Demo
Script Code
Step 1: Insert the below into the <HEAD> section of your page: (Select to copy)
The above references an jquery.js file. Download (by right clicking, and selecting “Save As”),
and upload to your webpage directory. Within the above code
CSS Code:
Step 2: Insert the below into the <HEAD> section of your page: (Select to copy)
HTML Code:
Step 3: Insert the below into the <BODY> section of your page: (Select to copy)
Got a question or need help customizing this Jquery code? Post it in the help me. If you have a comment or suggestion instead, post it in the comments section below.
Love this story?
Nice article and easy to understand Jquery
I have been working in php for last 1.3 yrs. Always wanted to have some effects that look good and should work efficiently. As a plugin jQuery works fine. I m a newbie and trying to get something through the article. Its really good to read. It was a good start for me after going through the article. If any further query could be entertained in personal I would be highly thankful to the author. Any ways its great!!!
I love jQuery. I have been using it for some time now. It still amazes me that people argue back and forth on javascript frameworks. If you don’t like a certain framework, don’t use it, and if you know the article is about said framework, don’t read it!
Really, it’s like people go out of their way to argue when they could be making a cup of tea or something. =D
I use mootools AND Jquery. With this I get the best from both worlds and don’t have to choose!
More info on how this is done can be found on
I can’t really say one is better than the other. They are 90% the same, speed wise it’s about milliseconds. When firefox 3.1 and google chrome becomes stable the difference won’t mater anymore as JS the engines will be much stronger and won’t need that much ‘optimizing’ anymore.