Woothemes の最新の flexslider を使用しており、ある flexslider を別の flexslider 内で初期化しようとしています。このような:
function initFrontpageSliders() {
$('#flexsliderFrontpage01').flexslider({
animation: "slide",
animationLoop: false,
pauseOnHover: true,
start: function(slider) {
//Fires when the slider loads the first slide
$('#flexsliderFrontpage02').flexslider({
animation: "fade",
directionNav: false,
animationLoop: false,
pauseOnHover: true
});
}
});
}
しかし、スクリプトを呼び出すと、スライド (リスト要素) 内ではなく、flexsliderFrontpage01 の下に flexsliderFrontpage02 ul が生成されます-次のように:
<div id="flexsliderFrontpage01" class="flexslider">
<div class="flex-viewport">
<ul class="slides">
<li>
<div class="row">
<div id="flexsliderFrontpage02" class="flexslider"> SLIDES SHOULD BE HERE </div>
</div>
</li>
<li>
<div class="row">slide 2</div>
</li>
</ul>
<ul class="slides">
<li><div class="row">fade 1</div></li>
<li><div class="row">fade 2</div></li>
<li><div class="row">fade 3</div></li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul class="flex-direction-nav"> </ul>
</div>
flexslider.js を簡単に修正できるかどうか、または私が何か間違っていることを知っている人はいますか? :-)
私のHTMLは次のようになります:
<div class="flexslider" id="flexsliderFrontpage01">
<ul class="slides">
<li>
<div class="row">
<div class="flexslider" id="flexsliderFrontpage02">
<ul class="slides">
<li><div class="row">fade div 1</div></li>
<li><div class="row">fade div 2</div></li>
<li><div class="row">fade div 3</div></li>
</ul>
</div>
</div>
</li>
<li>
<div class="row">
<h1>This is slide 2</h1>
</div>
</li>
</ul>
</div>
ここでこの例を使用して解決しました:
Flexslider.js update
slider.container = $(slider.containerSelector, slider).first(); //added .first()
selector: ".slides:first > li", //added :first
多分これは他の誰かを助けることができます:-)