jquery cycle2 slideshow nested slideshow next and prev buttons

Question

I use cycle2 plugin to display a slideshow comprised of some images and another slide show. The inner slideshow's next and prev buttons does not work for some reason(up and down, in the example) although they are properly set IMHO:

data-cycle-prev="#upDiv"
data-cycle-next="#downDiv"

and

<div id="upDiv">
    <a href="#" id="upImg"><img src="images/up.png" alt="" /></a>
    <p>scroll up</p>
</div>
<div id="downDiv">
    <p>to see more scroll down</p>
    <a href="#" id="downImg"><img src="images/down.png" alt="" class="outer-slide" /></a>
</div>

How can I make them work?

here is a demo: http://jsfiddle.net/FKU2L/22/

Answer 1

There're a few issues

First, in cycle 2, nested slideshows should look like this:

<div class="cycle-slideshow" data-cycle-slides="> div">
    <div><img src="..."/></div>
    <div>
        <div class="cycle-slideshow inner-slideshow">
            <img src="..."/>
            <img src="..."/>
        </div>
    </div>
    <div><img src="..."/></div>
</div>

The important things are that the slides should all be the same tag, like img img img or div div div not img div img. So you'll need to wrap your first level of slide imgs inside of divs. Since they are now not img, which is the default, you need to set data-cycle-slides="> div" on the outer slideshow.

In addition, you also need your inner slideshow to be inside of a div as well, like <div><div class="cycle-slideshow inner-slideshow"> instead of just <div class="cycle-slideshow inner-slideshow">. Slideshows can be nested, but not crossing swords.

What's currently happening on your example is that it's running both slideshows together, using the same next and prev buttons for both shows, and ripping the imgs out of the divs. So instead of running 2 nested slideshows, you're running 2 concurrent slideshows, where one happens to be inside of the other, which is a by-product of the slideshows directly touching each other and the first show's slides not being nested in divs.

made a working fiddle: http://jsfiddle.net/filever10/dLQPD/

You can learn more by viewing the source here: http://jquery.malsup.com/cycle2/demo/nested.php