Syncing multiple slide shows

[bigsweater]

Thanks for this awesome script! I've been looking for something this lightweight and customizable for ages. Awesome work.

Quick question:

I'm trying to sync up two slide shows using setInterval:

    $(document).ready(function() {

        var slideImages = $('.slideCaptions > .slides, .slideImages > .slides');
        var slideHeadlines = $('.slideHeadlines > .slides');

        function mySlides() { 
            slideImages.slideshow( 'show', 'next', {
                transition: 'push(left, false, ease)', // blind(direction, fade, ease)
                autoStyle: true, // handle some basic styles for you
                duration: 800, // duration of a transition
            });

            slideHeadlines.slideshow( 'show', 'next', {
                transition: 'push(right, false, ease)', // blind(direction, fade, ease)
                autoStyle: true, // handle some basic styles for you
                duration: 800, // duration of a transition
            });
            console.log("Done!");
        }
        var slidesInterval = setInterval( mySlides, 3000);

        $( '.sliderNext' ).click(function(){
            slideImages.slideshow( 'show', 'next', {
            } );

            slideHeadlines.slideshow( 'show', 'next', {
                transition:'push(right)'
            } );
        // or slideshowElement.slideshow( 'show', 'next' );
        });

        $( '.sliderPrev' ).click(function(){
            slideImages.slideshow( 'show', 'previous', {
                transition:'push(right)'
            } );

            slideHeadlines.slideshow( 'show', 'previous', {
                transition:'push(left)'
            } );
        // or slideshowElement.slideshow( 'show', 'previous' );
        // etc.
        });

    });

The console.log is there just to make sure the function fires—sure enough, "Done!" shows up in the console every three seconds.

However, the slide shows, when wrapped in that function, just don't work (including the next/prev functionality). Console shows no errors or anything, and I can't see anything wrong with my code (though I'm not much of a JS developer). Am I doing something wrong, or is it the script?

FYI, leaving the function and intervals out (and setting the slideshows to autoplay) works just fine, but they fall out of sync eventually.

Thanks for the script regardless; I'll definitely be using it in future projects!

[bigsweater]

Apologies: tried to label this with "Questions" but I don't think I can, without being an admin.

[ryanflorence]

Hey @bigsweater, try this:

$(document).ready(function() {

    var slideImages = $('.slideCaptions > .slides, .slideImages > .slides');
    var slideHeadlines = $('.slideHeadlines > .slides');

    slideImages.slideshow({
        transition: 'push(left, false, ease)', // blind(direction, fade, ease)
        autoStyle: true, // handle some basic styles for you
        duration: 800 // duration of a transition
    });

    slideHeadlines.slideshow({
        transition: 'push(right, false, ease)', // blind(direction, fade, ease)
        autoStyle: true, // handle some basic styles for you
        duration: 800 // duration of a transition
    });

    function showNext() {
        slideImages.slideshow( 'show', 'next' );
        slideHeadlines.slideshow( 'show', 'next' );
        console.log("Done!");
    }

    var slidesInterval = setInterval( showNext, 3000 );

    $( '.sliderNext' ).click(function(){
        slideImages.slideshow( 'show', 'next' );
        slideHeadlines.slideshow( 'show', 'next', {
            transition:'push(right)'
        } );

    // or slideshowElement.slideshow( 'show', 'next' );
    });

    $( '.sliderPrev' ).click(function(){
        slideImages.slideshow( 'show', 'previous', {
            transition:'push(right)'
        } );

        slideHeadlines.slideshow( 'show', 'previous', {
            transition:'push(left)'
        } );
    // or slideshowElement.slideshow( 'show', 'previous' );
    // etc.
    });

});

[bigsweater]

@rpflorence Awesome! Worked perfectly. Out of curiosity: why wouldn't wrapping the slider functions into one big fat function work? (Please pardon my ignorance—still learning JS.)

In case anybody else has a similar issue, the final script included a few different things: it pauses the sliders on hover, and resets the timer on prev/next, so there are no jarring transitions.

This script was easier to figure out than any of the five or so I've tried over the last few days. Was using the (really bloated) Cycle, and couldn't get it to do exactly what I wanted. It's really good to finally have a slider script that's this versatile and stuff. So, thanks.

[ryanflorence]

Would love to provide a longer response, but I'm packing up my house to move! Basically you need to create a slideshow instance before you go calling methods on it.

[bigsweater]

That makes sense. Thanks again.

For the record, I'm in the (beginning) process of learning JavaScript, and I learned a lot by tinkering with this. Typically I'll opt for one of the more designer-friendly plugins, but this is definitely a great learning tool, though you might not have had that in mind when you built it.

Any plans to include some sort of mobile/CSS3/touch functionality, a la flexslider?

[ryanflorence]

Cool. I personally don't use the jQuery UI API, I do it more like this:

var slideHeadlines = $('.slideHeadlines > .slides').slideshow({
    transition: 'push(right, false, ease)',
    autoStyle: true,
    duration: 800
}).data('slideshow'); // <-- gets the actual object so you can work
                      //     with it directly

slideHeadlines.show('next'); // v. slideHeadlines.slideshow('show', 'next')
slideHeadlines.show('next', { transition: 'push(right)' });

// and you can also console.log(slideHeadlines) to see what it actually is

Good luck!

[bigsweater]

Y'know, I saw that in the docs, but I was throwing spaghetti at the wall till something stuck, honestly. Couldn't get the more direct method to work, but I was doing it all wrong; now I can see the actual difference between this and the jQuery API. This way is fewer lines of code, too.

For anybody with the same question(s): the final-ish code is on Pastebin.