tags:

views:

135

answers:

1

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

A: 

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

Dan Heberden
Modifying the diff variable affects the speed of the slider. If I use a value of numberOfTime = .001 the slide is instant and gives the end result I want but then I lose the slide animation...
Yourbudweiser
It looked like that was the width to change margin.. the point is if you're moving right 600 px 4 times, just move right 2400px in the same amount of time...
Dan Heberden
I see what you are saying but the number of pixels to move right is a calculated value and not a loop. The animation slides right by that number of pixels...p = (t*w*-1);$("ul",obj).animate({ marginLeft: p }, { queue:false, duration:speed, complete:adjust });
Yourbudweiser
updated answer (ran your code in jsfiddle)
Dan Heberden
I was trying to avoid the sliding from next to next to next until it reaches the selected div. I have decided just to "show" the next slide instead of sliding to the next. Thanks for your input!
Yourbudweiser
No worries - i added a bit more description to the answer to hopefully help ya
Dan Heberden