Pausing nested slideshows in Cycle2

Question

I have successfully implemented the cycle2 plugin on a couple of slideshows on a site, including one nested slideshow. I have all the simple, obvious stuff working, but am having some trouble with one advanced bit which is over my head.

I have one nested slideshow. Slideshow of Categories displays individual slides. I've got pager nav on the parent slideshow, and next/prev nav on each of the inner slideshows. I've done this setup before using cycle, and one of the things I had working on the cycle versions was some js that would cause only the currently active inner show to be running. This is what I've been unable to sort out this time.

What is happening is that when category1 first loads, the cat1 inner slides progress. They are on auto-advance as well as next/prev. But if I then click on category2, the cat2 inner slides are in the same position that the cat1 slides where in when I left them. This goes for however may categories you page through. The progressing of all inner slideshows is the same whether you're waiting for them to auto-advance or if you are using next/prev nav. What I would LIKE to happen is that category1 loads up, you look through them a bit, then you click on another category, and when the new set of inner slides loads up, they start at the beginning of their own set. So if I'm looking at slide 2.3, and click on category4, what I see next is 4.1, not 4.3. Ideally, I'd like each inner slideshow to pause when you leave it, so if you come back to it you pick up where you left off. But at the very least I'd like them not to keep progressing while not in view.

There is a sample of a nested slideshow on Malsup's site, but the js in the source code is a bit over my head. I can tell what it's doing, mostly (it auto advances from parent1 to parent2 to parent3 as each of the child slideshows complete, and the child slideshows only run once and then shut down), but I can't sort out the js and the various commands and events available enough to roll my own solution for what I'm trying to achieve. And the new version is apparently too new for there to be an answer already worked up somewhere that I can pick over and figure out. ;-)

var outer = $('.catdisplay');
var inners = $('.portfolioslides');

$('.catdisplay').on('cycle-before', function(e, opts) {
    // ignore bubbled events from inner slideshows
    if (e.target !== this)
        return;
    inners.cycle('pause');
});
$('.catdisplay').on('cycle-after', function (e, opts) {
    inners.cycle();
});

Here is the jsfiddle with my very poor attempt to resolve the issue.

Thanks!!

score 0 · Answer 1 · answered Oct 04 '13 at 17:03

The reason that this is happening is that all of the inner cycles are progressing at the same time.

First, I set all of the nested slideshows, besides category1, to have data-cycle-paused="true" which will start them paused.

Next, I set the pagers in the nested slideshows to have a different class. When they all have the same class, and you click "Next", It will move each slideshow with that pager class to the next slideshow. If they are all unique, then it will only control move the current slideshow.

See this updated jsfiddle

Pausing nested slideshows in Cycle2

1 Answers1