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

Question

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

您可以在 http://jsfiddle.net/deshg/x8xaxx39/ 看到现场 fiddle

我的问题是:

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

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

3) 当您手动拖动以调整视口(viewport)宽度时，有时循环幻灯片高度值不会更新，这意味着父高度不会更新，这是一个错误吗？或者有没有办法解决这个问题？

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

您尝试做的事情并不容易，或者“开箱即用”。

首先，

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 操作，人们会更容易提供帮助。希望这会有所帮助。