Syncing multiple sliders using jQuery Cycle

1
votes

I'm using jQuery Cycle on a project. You can see my script at pastebin.

Basically, there are three different sliders tied to the same directional controls. I'd like their transitions to be synchronized.

As it stands, since there are three separate slider instances here, they start out synchronized, but eventually fall out of sync — sometimes immediately, if you leave the browser window or something. This causes the sequences to go out of order and generally looks off. I'd like for all the sliders to fire at the exact same time, preferably linked to the .sliderImages slides.

I've tried creating a function that contains the other two sliders and putting that in the before option on the .sliderImages slider, but that makes it go all wonky and I don't know enough JS to be able to troubleshoot.

As usual, any help is appreciated.

Thanks!

2
jquerycyclejquery-cycle
Setting them all to timeout: 0 and adding setInterval("$('.slides').cycle('next')", 3000); seems to sync the animations, but it interferes with the previous/next slide navigation. - bigsweater
I've almost got it. The slides sync properly, and the show pauses on hover; something's wrong, though, when the mouse leaves the .hero area. Instead of simply resuming the slideshow, it seems like it doubles the speed on every other slide, or something along those lines. I'm sure I'm simply misunderstanding the javascript SetInterval functionality somehow; any help appreciated. I tried this but couldn't get it to work. - bigsweater

2 Answers

1
votes

So after banging my head against a wall for awhile, I stumbled upon Ryan Florence's jQuery Slideshow. It's much (much, much) lighter than Cycle or pretty much any other slideshow plugin I've tried (even though it requires jQuery UI), it's well-documented, and relatively easy to drop in and get working how you wish.

There's a thread on his slideshow Github page where he helped me get the code working properly, along with a link to the final code.

Of course, if anybody has suggestions to improve my code, I'm open to them. But this plugin's about as dead simple and versatile as they come.

Perhaps a more talented programmer than I could make it mobile-friendly, like Flexslider...

0
votes

If you use (window).load function for loading up the jquery cycle and use two different selectors with the same options, then you should get two sliders perfectly in sync.

I assume the timing would have been off if you loaded them as two separate inits and also if you loaded them up on ready.

Anyway, it works for me.