I’m just now getting into jquery and slowly learning it (shame, I know), and as a webdesigner I find its use to be very important.
Now I’m trying to figuire out how one would build a slider as the one shown on: http://karmalooptv.com
I have looked at the source code but due to the site being hosted on drupal, there are many unnecessary scripts and styles that are required for this slider to work that may not be required for my needs.
I don’t understand how It can stretch accross the screen and cycle through the images, and when it reaches the last slide either to the left or right it’ll fill it in with the first/last image and keep going.
Thanks in advanced…
I’ve created this jsFiddle to help you : http://jsfiddle.net/QEVqN/7/
There is the raw functionality for a slider. Let me explain what I’m doing:
1) The visible slides and the one that enters are the only ones that need animated,
2) When we navigate left or right, align the entering slide to the correct position (right or left) and animate it with the visible ones to right or left
You don’t have to animate all the slides, if there are many (maybe 100), and you get the circular effect.
Usually, you will set overflow:hidden for the div that contains all the slides, but I didn’t so you can see what happens behind it. Here is with overflow:hidden http://jsfiddle.net/QEVqN/6/