我正在尝试使用 Cycle2 http://jquery.malsup.com/cycle2/在幻灯片中制作幻灯片，但遇到了一些问题，因为我希望幻灯片的高度是动态的，并且它下面的任何内容都被推送在它下面。
幻灯片中有两个选项卡，显示两张幻灯片，每张幻灯片包含 6 个高度可变的“产品”。这是我到目前为止的一个例子：http: //jsfiddle.net/Leta9/8/
问题：
(1) 幻灯片似乎没有正确初始化。一旦您单击“Tab 1”和“Tab 2”几次，它会自行更正，但首先（对我来说，在 Chrome 中）我看到第一个选项卡后面的第二个选项卡。
(2) 内部滑块上的 scrollHorz 过渡看起来有点时髦，它并不总是像我想要的那样包含在红色框中，并且在过渡期间溢出。
(3) 滑块下方的内容没有被推到其下方。在此处应用外部幻灯片（即没有嵌套）之前http://jsfiddle.net/Leta9/7/响应高度工作正常，因为我已经添加了data-cycle-auto-height="container"（请参阅动态容器大小调整文档 - http://jquery.malsup。 com/cycle2/demo/container-resize.php）并且下面的内容保持在我想要的下方。
我也在这个网站上使用 Foundation 3，所以有一些额外的 CSS 样式与我在小提琴上模仿的列有关，但我不明白为什么这会影响事情。
实际上已经为此苦苦挣扎了几个小时，非常感谢一些帮助。谢谢！
HTML：
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div id="featured-slider ">
<div id="per-slide-template" class="slider-tabs"></div>
<div class="cycle-slideshow outer-slideshow" id="outer-slideshow"
data-cycle-fx="fade"
data-cycle-timeout="0"
data-cycle-slides="> div"
data-cycle-pager="#per-slide-template"
data-cycle-speed="10"
>
<!-- TAB 1 CONTENTS-->
<div class="product-slider" data-cycle-pager-template="<div class='tab-container'><a href=#>Tab 1</a></div>">
<div class="nav prev one column">
<a id="prev-1">Prev</a>
</div>
<div class="cycle-slideshow inner-slideshow ten columns"
data-cycle-fx="scrollHorz"
data-cycle-timeout="0"
data-cycle-prev="#prev-1"
data-cycle-next="#next-1"
data-cycle-swipe=true
data-cycle-slides="> ul"
data-cycle-speed="800"
data-cycle-auto-height="container"
>
<ul class="product-slide twelve columns" id="product-slide-1-1">
<li class="two columns product">
<img src="http://www.placehold.it/100x150" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x150" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x150" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x150" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x150" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x150" /><span>Hello</span>
</li>
</ul>
<ul class="product-slide twelve columns" id="product-slide-1-2">
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
</ul>
</div>
<div class="nav next one column">
<a id="next-1">Next</a>
</div>
<div class="clear"></div>
</div><!--product-slider-->
<!-- END TAB 1 CONTENTS-->
<!-- TAB 2 CONTENTS-->
<div class="product-slider" data-cycle-pager-template="<div class='tab-container'><a href=#>Tab 2</a></div>">
<div class="nav prev one column">
<a id="prev-2">Prev</a>
</div>
<div class="cycle-slideshow inner-slideshow ten columns"
data-cycle-fx="scrollHorz"
data-cycle-timeout="0"
data-cycle-prev="#prev-2"
data-cycle-next="#next-2"
data-cycle-swipe=true
data-cycle-slides="> ul"
data-cycle-speed="800"
data-cycle-auto-height="container"
>
<ul class="product-slide twelve columns" id="product-slide-2-1">
<li class="two columns product">
<img src="http://www.placehold.it/100x300" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x300" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x300" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x300" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x300" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x300" /><span>Hello</span>
</li>
</ul>
<ul class="product-slide twelve columns" id="product-slide-2-2">
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
<li class="two columns product">
<img src="http://www.placehold.it/100x250" /><span>Hello</span>
</li>
</ul>
</div>
<div class="nav next one column">
<a id="next-2">Next</a>
</div>
<div class="clear"></div>
</div><!--product-slider-->
<!-- END TAB 2 CONTENTS-->
</div><!--outer-slideshow-->
</div>
<div class="clear"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
CSS：
* {
box-sizing: border-box;
}
.one {
width: 8.3333%;
}
.two {
width: 16.6666667%;
}
.ten {
width: 83.33333%;
}
.twelve {
width: 100%
}
.columns, .column {
float: left;
padding: 0 9px;
}
#featured-slider {
clear: both;
width: 100%;
}
.product-slider {
border: 1px solid red;
clear: both;
width: 100%;
}
ul, li {
padding: 0;
margin: 0;
list-style-type: none;
}
.clear {
clear: both;
width: 100%;
}