如何防止重叠幻灯片并确保在jquery cycle2嵌套幻灯片中调整动态容器大小？

Question

我正在使用cycle2（http://jquery.malsup.com/cycle2/）来制作包含许多其他幻灯片（包含可变高度的图像和文本）的主幻灯片。我希望父级和当前幻灯片（和容器）的高度调整为当前幻灯片高度。这几乎有效，但我遇到了一些问题，我不能为我的生活看到原因，如果有人能指出我正确的方向，我会非常感激。

你可以在http://jsfiddle.net/deshg/x8xaxx39/

看到一个活泼的小提琴

我的问题是：

1）为什么在第一次加载时它会显示第二个嵌套幻灯片到第一个（当我点击主页面时它会修复它）？

2）为什么在第一次加载时循环幻灯片高度与当前幻灯片高度不匹配，因为我使用wait命令等待图像加载并将自动高度设置为容器（当我点击主要时寻呼机它也解决了这个问题吗？

3）当您手动拖动以调整视口宽度时，有时候不会更新循环幻灯片高度值，这意​​味着父高度不会更新或是否有办法解决这个问题？

4）当您单击查看图库2然后单击返回查看图库1时，图库1寻呼机（底部的缩略图）不起作用，因为图库2具有更高的z-index，尽管不属于主动滑动？如何确保活动幻灯片具有最高的z-index？

非常感谢您提出的任何建议，这对我来说似乎并不好看！

戴夫

仅供参考，相关代码为：

<div class="module">
    <div class="inner">
        <h2>GALLERIES</h2>
        <!-- empty element for pager links -->
        <div id="custom-pager-galleries" class="custom-pager"></div>
        <p>Ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
        <div class="cycle-slideshow gallery"
            data-cycle-fx="fade"
            data-cycle-timeout=0
            data-cycle-slides="> div"
            data-cycle-pager="#custom-pager-galleries"
            data-cycle-pager-template="<a href=#> {{name}} </a>"
            data-cycle-loader="wait"
            data-cycle-auto-height="container"
            data-cycle-hide-non-active="true"
            >
            <div data-name="Gallery 1">
                <div class="cycle-slideshow"
                    data-cycle-fx="fade"
                    data-cycle-timeout=0
                    data-cycle-slides="> div"
                    data-cycle-pager="#custom-pager-gallery"
                    data-cycle-pager-template="<a href='#'><img src='{{imgsrc}}' class='gallerythumbnail gt{{index}}'></a>"
                    data-cycle-loader="wait"
                    data-cycle-auto-height="container"
                    >
                    <div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
                        <img src="http://malsup.github.io/images/beach2.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 1</strong></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
                        <img src="http://malsup.github.io/images/beach3.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 2</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach1.jpg">
                        <img src="http://malsup.github.io/images/beach1.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 3</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
                        <img src="http://malsup.github.io/images/beach2.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 4</strong></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
                        <img src="http://malsup.github.io/images/beach3.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 5</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                </div>
                <div class="pager">
                    <div id="custom-pager-gallery" class="custom-pager gallerythumbnails"></div>
                </div>
            </div>
            <div data-name="Gallery 2">
                <div class="cycle-slideshow"
                    data-cycle-fx="fade"
                    data-cycle-timeout=0
                    data-cycle-slides="> div"
                    data-cycle-pager="#custom-pager-gallery2"
                    data-cycle-pager-template="<a href='#'><img src='{{imgsrc}}' class='gallerythumbnail gt{{index}}'></a>"
                    data-cycle-loader="wait"
                    data-cycle-auto-height="container"
                    >
                    <div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
                        <img src="http://malsup.github.io/images/beach2.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 2</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach1.jpg">
                        <img src="http://malsup.github.io/images/beach1.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 1</strong></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
                        <img src="http://malsup.github.io/images/beach2.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 3</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
                        <img src="http://malsup.github.io/images/beach3.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 4</strong></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
                        <img src="http://malsup.github.io/images/beach2.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 5</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                </div>
                <div  class="pager">
                    <div id="custom-pager-gallery2" class="custom-pager gallerythumbnails"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您尝试做的事情并不容易，或者提供给开箱即用的＃34;

首先，

data-cycle-auto-height="container"

不是允许的选项。检查API。它必须是整数，比率或字符串＆＃34; calc＆＃34;。

其次，自动高度可能很棘手。您正在使用加载程序上的wait选项进入正确的轨道。问题是父幻灯片显示仍将在子幻灯片初始化之前初始化，原因很简单，因为它在标记中较早出现。您可能想要做的是初始化子幻灯片，然后在两个子幻灯片完全加载后将父幻灯片初始化为回调。只有这样，它们才具有父幻灯片可用于自动高度计算的布局高度。您将需要移除声明性语法，而是强制调用循环幻灯片。我建议使用jQ延迟对象和when()语法来简化回调结构。

在半伪代码中：

var childSs1 = new $.Deferred();
var childSs2 = new $.Deferred();

$('.child-slideshow1).on("cycle-post-initialize", function() {
    childSs1.resolve();
});

$('.child-slideshow2).on("cycle-post-initialize", function() {
    childSs2.resolve();
});

// The following will be called asynchronously
$.when( childSs1, childSs2 ).done(function () {
    $(.parent-slideshow).cycle({options});
});

第三，您最有可能遇到事件冒泡问题。如果某个事件在子幻灯片显示中触发，则该合成事件将冒泡到DOM中的所有父元素，包括您的父幻灯片。这将混淆父幻灯片中的内容，因为它会将这些事件解释为适用于它。对于这个用例而言，Cycle2并没有真正写好。不能说它无法完成。但是你可能需要在所有循环事件中锁定冒泡，例如：

$( ".all-slideshows" ).on("cycle-after cycle-before cycle-bootstrap
cycle-destroyed cycle-finished cycle-initialized cycle-next
cycle-pager-activated cycle-paused cycle-post-initialize
cycle-pre-initialize cycle-prev cycle-resumed
cycle-slide-added cycle-slide-removed cycle-stopped
cycle-transition-stopped cycle-update-view", function( event ) {
  event.stopPropagation();
});

此外，如果你尽可能减少你的小提琴，它会让人们更容易帮忙。希望这会有所帮助。