Cycle2 http://jquery.malsup.com/cycle2/を使用してスライドショー内でスライドショーを作成しようとしていますが、スライドショーの高さを動的にし、その下のコンテンツをプッシュする必要があるため、いくつかの問題が発生していますその下に。
スライドショーには 2 つのタブがあり、それぞれ高さが可変の 6 つの「製品」を含む 2 つのスライドが表示されます。これまでに私が持っているものの例を次に示します: http://jsfiddle.net/Leta9/8/
問題:
(1) スライドショーが正しく初期化されていないようです。「Tab 1」と「Tab 2」を数回クリックすると、自動的に修正されますが、最初に（私の場合、Chromeで）1番目のタブの後ろに2番目のタブが表示されます。
(2) 内側のスライダーの scrollHorz トランジションは少しファンキーに見えます。希望どおりに常に赤いボックスに含まれているとは限らず、トランジション中にオーバーフローします。
(3) スライダーの下のコンテンツが下に押されていません。ここで外側のスライドショーを適用する前に（つまり、ネストなしで）http://jsfiddle.net/Leta9/7/追加したように、レスポンシブの高さは正常に機能していますdata-cycle-auto-height="container"（Dynamic Container Sizing docs - http://jquery.malsup. com/cycle2/demo/container-resize.php ) 以下のコンテンツは、私が望むように下にとどまります。
これが掲載されている Web サイトでも 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%;
}