Question

我尝试使用cycle2 jQuery插件设置嵌套幻灯片，并且在更改父幻灯片时我母版的非活动幻灯片无法正确隐藏时出现问题。我正在使用演示中的代码：

<div class="cycle-slideshow" id="slideshow"
    data-cycle-fx="fade"
    data-cycle-slides="> div" 
    data-cycle-timeout=0 
    data-cycle-speed=250
    data-cycle-prev="#prev"
    data-cycle-next="#next">
<div>
    <div class="cycle-slideshow inner-slideshow"
        data-cycle-fx="tileSlide"
        data-cycle-timeout=3000
        data-cycle-loop=1>
        <img src="http://malsup.github.io/images/beach1.jpg" width="200" height="200">
        <img src="http://malsup.github.io/images/beach2.jpg" width="200" height="200">
        <img src="http://malsup.github.io/images/beach3.jpg" width="200" height="200">
    </div>
</div>

<div class="small">
    <div class="cycle-slideshow inner-slideshow"
        data-cycle-fx="scrollHorz"
        data-cycle-timeout=0
        data-cycle-loop=1>
        <img src="http://malsup.github.io/images/beach4.jpg" width="200" height="200">
        <img src="http://malsup.github.io/images/beach5.jpg" width="200" height="200">
        <img src="http://malsup.github.io/images/beach6.jpg" width="200" height="200">
    </div>
</div>

<div>
    <div class="cycle-slideshow inner-slideshow"
        data-cycle-fx="fadeOut"
        data-cycle-timeout=0
        data-cycle-loop=1>
        <img src="http://malsup.github.io/images/beach7.jpg" width="200" height="200">
        <img src="http://malsup.github.io/images/beach8.jpg" width="200" height="200">
        <img src="http://malsup.github.io/images/beach9.jpg" width="200" height="200">
    </div>
</div>

我使用演示中的代码设置了一个小提琴，更清晰：

http://jsfiddle.net/cfu5yp2r/

如果家长使用scrollHorz或scrollVert，您并不会注意到（虽然非活动幻灯片仍然存在），但是当您使用淡入淡出效果时，您可以看到有效来自父母的非活动幻灯片中的孩子的图像粘在上面，不知何故在顶部。对我来说，问题是我的父幻灯片中的导航和文本内容无论我对z-index做了什么都无法点击。

通过点击并拖动幻灯片来最好地说明 - 你会看到拖走的图像实际上并不是当前的幻灯片。或者使用网络检查员，您可以看到您在顶部找到的图像并不是“现场直播”。幻灯片中的一个。

嵌套幻灯片的jQuery Cycle2非活动父级未隐藏

0 个答案: