我正在尝试使用Cycle2 http://jquery.malsup.com/cycle2/在幻灯片中制作幻灯片，并遇到一些问题，因为我希望幻灯片高度的高度是动态的，并且其下方的任何内容都要在其下方向下推。
幻灯片中有两个标签显示两张幻灯片，每张幻灯片包含6个可变高度的“产品”。这是我到目前为止的一个例子：http://jsfiddle.net/Leta9/8/
问题：
（1）幻灯片似乎没有正确初始化。一旦你点击“标签1”和“标签2”几次它就会自我纠正，但首先（对我来说，在Chrome中）我看到第一个标签后面的第二个标签。
（2）内部滑块上的scrollHorz过渡看起来有点时髦，它并不总是包含在红色框中，因为我想要并在过渡期间溢出。
（3）滑块下面的内容没有被推到它下面。在应用外部幻灯片显示（即没有嵌套）之前http://jsfiddle.net/Leta9/7/，响应高度正常，因为我添加了data-cycle-auto-height="container"（请参阅动态容器大小调整文档 - http://jquery.malsup.com/cycle2/demo/container-resize.php）和以下内容保持在我想要的地方。
我也在网站上使用了基础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%;
}