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

Question

我正在使用 cycle2 (http://jquery.malsup.com/cycle2/) 制作包含许多其他幻灯片（包含可变高度的图像和文本）的主幻灯片。我希望父级和当前幻灯片（和容器）的高度调整为当前幻灯片高度。这几乎可行，但我遇到了一些问题，我一生都无法理解为什么，如果有人能指出正确的方向，我将不胜感激。

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

观看直播 fiddle

我的问题是：

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

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

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

你想做的事情并不容易，或者是为 "out of the box" 提供的。

首先，

data-cycle-auto-height="container"

不是允许的选项。检查 API。它需要是整数、比率或字符串 "calc".

其次，自动高度可能很棘手。在加载器上使用 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();
});

此外，如果您尽可能减少 fiddle，人们会更容易提供帮助。希望这有帮助。

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

How to prevent overlapping slides and ensure dynamic container resizing in jquery cycle2 nested slideshows?

javascript

jquery

css

jquery-cycle

jquery-cycle2