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

Question

I am trying to create two different sections with bxsliders. Second section is hidden and it will only display once section2 clicked but When i try to clicking the second bxslider its not working.

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

Can someone please help me.

Answer 1

See this: 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');
    });
});

UPDATE: 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;
    });

});

UPDATE

The following is untested since I don't have a Mac yet, so caveat emptor

In referencing issues with Chrome Mac:

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

Try using jQuery 1.7 and if that doesn't work downgrade bxSlider as well:

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

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