custom jquery slider right/left arrows cause loop to mess up

I built this slider www.freewaycreative.com/jsfun/

There are four slides but the fourth is the same image as the first (which just sits in the back while 2-4 slide in then get pushed back into their hidden position.

My problem arises with the direction arrows. I have 4 different IDs for each left and right arrows so they c开发者_Python百科an appear at specific z-indexes so I can differentiate the slides based on what arrows appear. when I hover over a slide, a specific set of arrows will appear.

when I click an arrow I want it to slide in the next slide. but it completely confuses the script. I basically want it to do what the nivo slider does. check it out.

---

Your link seems to be broken (as I can't access the example you're explaining). From the sounds of it, a jQuery gallery / carousel would be an ideal solution to what you're looking to do... Have a look at jCarousel - it's a very flexible content/image carousel and would work quite nicely in your scenario.

---

You don't need all of those arrows. Just one left and one right. You can figure out all the rest with js and jquery.

Here is a simple version I put together:

http://jsfiddle.net/jtbowden/ZR9bM/

It's not perfect, but it is much simpler. The problem you were having is that every time the arrow was clicked, you started a new animation loop through a bunch of setTimeouts. You needed to stop your existing timeout before you started another one. In my script, I store the timeout, or interval in this case, in a variable, and then call clearInterval (or clearTimeout) to stop it.

Of course, I could also ask... if you like Nivo, why not just use Nivo?

---

Thank you. I fiddled with what you made and got it to work. I had to remove the clearinterval from the hover function and add it to the click functions, then restart the automatic slider after the single slide.

However, is it swinging? the reason i dont want nivo is because it doesnt swing. Also, I am trying to learn to write my own stuff. But it looks as if our new slider is no longer swinging. At least not as much as my original slider.

The same function is used in both versions: animate({ "left": "-=800px" }, 1000);

Why do they behave differently? Thanks again

link: http://jsfiddle.net/ZR9bM/14/