jquery - flexslider中的jquery flexslider

Question

我对 flexslider 有疑问。我想在另一个 flexslider 中创建一个 flexslider。试图修复它，但它不能正常工作。

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>"
});

你有什么解决办法？

Answer 1

尝试使用 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);
         }
     });
 });