我正在使用 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>
最佳答案
您尝试做的事情并不容易，或者“开箱即用”。
首先，
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 操作，人们会更容易提供帮助。希望这会有所帮助。
关于javascript - 如何防止幻灯片重叠并确保在 jquery cycle2 嵌套幻灯片中动态调整容器大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28461914/