Question

I have a problem with a slideshow I’m working on, using the jQueryCycle script. The slideshow is made up five sliders: a large slide where the images move horizontally, and four small slides stacked on top of each other that slide vertically. Whenever the main slide transitions to the next slide, the vertical slides all transition and move in sync with each other, with the small bottom slide image matching the main slide.

My problem comes into play when I try to add a certain function to my vertical slides. When the user clicks on the top vertical slide, I want the slideshows to smoothly transition to the next slide three times, so the image the user clicked is now the bottom slide and main slide.

for (var i=0; i < 3; i++) {
setTimeout(function() {
    $('#slides').cycle('next');
    $('#slideh1').cycle('next');
    $('#slideh2').cycle('next');
    $('#slideh3').cycle('next');
    $('#slideh4').cycle('next');
}, 2000);
}

When I test this on the top vertical slide, it waits two seconds before skipping to the selected slide, only showing a single slide transition rather than three. I don’t know if there’s a flaw in my logic or if I’m not using the setTimeout function correctly, but any help would be greatly appreciated!

Full test code can be found here.

Answer 1

I was going about this the wrong way. A slideshow cycle in jQuery Cycle doesn’t appear to be a function you can repeat unless you use the after callback.

jQuery('#slides').cycle({
    fx:     transitionMain
    ,autostop: autoS
    ,speed: delayMain
    ,delay: -'0'
    ,timeout: timeO
   //,pause: '0'
    ,continuous: isContinuous
    ,easeIn: eas
    ,easeOut: eas
    ,speedIn: transitionSpeed
    ,speedOut: transitionSpeed
    ,synch: 'true'
    ,after: mainSlideNum
    ,startingSlide: mainStartSlide
    });

For my main slideshow, I call the mainSlideNum function as my after callback.

    function mainSlideNum(curr,next,opts) {
    var totalSlides = opts.slideCount;
    if (opts.currSlide == 0) {
    cSlideMain = (totalSlides)
        } else {
        cSlideMain = opts.currSlide; }
    $('#slides').attr('curSlideNumber', cSlideMain);

    //If vertical slides are clicked, checks to see if the clicked slide matches the current slide. Continues to cycle until it matches.
    if (clickedSlide != cSlideMain && clickedSlide != null) {
        nextSlide();
        }   
    if (clickedSlide == cSlideMain) { //ends the slide cycling
        clickedSlide = null;
    initializeValues();
    changeSlideOptions();   
        }
    }

The variable clickedSlide refers to the clicked slide number for the vertical scrolling slides, and cSlideMain contains the slide number of the currently displayed slide. The function continues to cycle to the next slide until the two numbers match.