我正在尝试创建两个堆叠部分，其中包含不同的 bxsliders。当第二部分称为 bxslider 不工作时

Question

我正在尝试使用 bxsliders 创建两个不同的部分。第二部分是隐藏的，它只会在单击 section2 后显示，但是当我尝试单击第二个 bxslider 时，它不起作用。

<https://jsfiddle.net/dayan_z/6zjtnh6t/>

谁能帮帮我。

Answer 1

看到这个：FIDDLE

HTML

<nav> <span id="s1">section1</span>
 <span id="s2">section2</span>

</nav>
<section id="section1" class="on">
    <ul class="bxslider">
        <li>
            <img src="http://placehold.it/666x375/000/fff.png&text=FIRST" />
        </li>
        <img src="http://placehold.it/666x375/cab/fc1.png&text=SECOND" />
        </li>
    </ul>
</section>
<section id="section2" class="off">
    <ul class="bxslider2">
        <li>
            <img src="http://placehold.it/666x375/666/375.png&text=THIRD" />
        </li>
        <li>
            <img src="http://placehold.it/666x375/9a7/a1f.png&text=FOURTH" />
        </li>
        <li>
            <img src="http://placehold.it/666x375/fff/000.png&text=LAST" />
        </li>
    </ul>
</section>

CSS

nav {
    width:100%;
    background:rgba(240, 85, 36, 1);
}
span {
    font-family:sans-serif;
    text-transform:uppercase;
    padding:1rem;
    color:#fff;
    font-size:.75rem;
    cursor: pointer;
    pointer-events: auto;
}
#section1 {
    width:100%;
    height:400px;
    background:red;
}
#section2 {
    width:100%;
    height:400px;
    background:blue;
}
.on {
    visibility: visible;
}
.off {
    visibility: hidden;
}

jQuery

$(document).ready(function () {

    var bx1 = $('.bxslider').bxSlider({
        auto: true,
        autoControls: true
    });


    var bx2 = $('.bxslider2').bxSlider({
        auto: true,
        autoControls: true
    });

    $('#s1').on('click', function () {
        $('#section1').toggleClass('on off');
    });

    $('#s2').on('click', function () {
        $('#section2').toggleClass('on off');
    });
});

更新： FIDDLE

$(document).ready(function () {

    var bx1 = $('.bxslider').bxSlider({
        auto: true,
        autoControls: true
    });


    var bx2 = $('.bxslider2').bxSlider({
        auto: true,
        autoControls: true
    });

    var off = 
    $('#s1').on('click', function () {
        if ($('#section1').hasClass('off')) {
            $('#section1, #section2').toggleClass('on off');
            bx2.destroySlider();
            bx1.reloadSlider({
                auto: true,
                autoControls: true
            });
        } else return false;
    });

    $('#s2').on('click', function () {
        if ($('#section2').hasClass('off')) {
            $('#section2, #section1').toggleClass('on off');
            bx1.destroySlider();
            bx2.reloadSlider({
                auto: true,
                autoControls: true
            });
        } else return false;
    });

});

更新

以下内容未经测试，因为我还没有Mac，所以买者自负

在 Chrome Mac 的引用问题中：

https://github.com/stevenwanderski/bxslider-4/issues/447

尝试使用 jQuery 1.7，如果这不起作用也降级 bxSlider：

https://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.js

https://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.css

我正在尝试创建两个堆叠部分，其中包含不同的 bxsliders。当第二部分称为 bxslider 不工作时

I am trying to create two stacked sections with different bxsliders in them. When second section called bxslider not working

jquery

bxslider