Question

I am using Easy Slider 1.7 – jQuery plugin and have made many modifications. My slider contains 7 slides, numeric navigation and next and previous arrows. The only problem is the numeric navigation. When you are on slide 1 and click slide 5, for example, all the slides scroll by, one-by-one. I am having trouble modifying the code so that whatever slide you are on, when you click another slide, it is the next one.

Sample here: http://www.weiserwebworld.com/slider.html

Answer 1

I’m not sure what you mean – if you are worried that is cycles from one to the next to the next then you need to revamp your organization of elements.. such as

• have all the elements hidden except (and absolute positioned in a relative container)
  visible (say #1 )
• user clicks slide #4, so place the #4
  element to the right of the current
  div
• slide both over
• hide slide #1

That is, if your container is 500px wide

<div id="container" style="Width:500px; position:relative;" />

And all of your slides are hidden with an absolute potition.

When you animate to a slide, place it’s left:501px; and animate it’s left to 0. At the same time, animate the current slide’s left to -500 and then hide it. You can decide if the slide is before (lower index/number) to reverse the animation.

if you’re just worried about the time it takes to get from slide 1 to 4, make the speed constant so it always takes X time to get from one to the other