0

フレックススライダーに問題があります。別のフレックススライダー内にフレックススライダーを作成したい。そのように修正しようとしましたが、正しく動作しません。

HTML:

<div id="main-slider" class="flexslider" style="background-color: #000">
    <ul class="slides">
        <li>
            <div id="sec-slider" class="flexslider" style="background-color: #fff; height: 250px;">
                <ul class="slides">
                    <li><img src="img/slide-2.jpg" /></li>
                    <li><img src="img/slide-3.jpg" /></li>
                </ul>
            </div>
        </li>
        <li><img src="img/slide-2.jpg" /></li>
        <li><img src="img/slide-3.jpg" /></li>
    </ul>
</div>

JS: 

$('#main-slider').flexslider({
    animation: "slide",
    slideshowSpeed: 7000,
    prevText: "<i class='icon-chevron-left'></i>",
    nextText: "<i class='icon-chevron-right'></i>",
    controlsContainer: "#main-con"
});

$('#sec-slider').flexslider({
    animation: "slide",
    slideshowSpeed: 3000,  
    prevText: "<i class='icon-chevron-left'></i>",
    nextText: "<i class='icon-chevron-right'></i>"
});

解決策はありますか？

4

1 に答える 1

0

次のように before プロパティを使用して、セカンダリ スライダーの読み込み時間を遅らせてみてください。

$(window).load(function () {

     $('#main').flexslider({
         animation: "slide",
         slideshowSpeed: 7000,
         controlsContainer: ".flex-container",
     });

     $('#sec-slider').flexslider({
         animation: "slide",
         slideshowSpeed: 3000,
         prevText: "<i class='icon-chevron-left'></i>",
         nextText: "<i class='icon-chevron-right'></i>"
         before: function (slider) {
             // delay loading this slider
             $('.slide').find('.li').delay(800);
         }
     });
 });
于 2013-03-10T19:57:08.837 に答える