bxslider multiple slider

run same controls on multiple slider

by Irvin Dominin

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<body>
    <!-- slider 1 -->
    <ul class="bxslider">
        <li>Slide 1</li>
        <li>Slide 2</li>
        <li>Slide 3</li>
    </ul>
    <button id="reset">reset</button>
</body>

CSS

.bxslider li {
    background: #efefef;
    height:100px;
}

JavaScript

var slider;

jQuery(document).ready(function ($) {

    // launch bxslider
    slider = $('.bxslider').bxSlider({
        slideWidth: 1200,
        minSlides: 1,
        maxSlides: 1,
        slideMargin: 10,
        pager: false
    });


    $('#reset').click(function () {
        slider.destroySlider();
        slider = $('.bxslider').bxSlider({
            slideWidth: 500,
            minSlides: 2,
            maxSlides: 2,
            slideMargin: 10,
            pager: false
        });

    });

});