Syncing multiple slide shows about jquery-rf-slideshow

[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.