I use bxslider, on the page there are 3 sliders in a row - one by one. Each slider generates its own separate bx-controls, i.e. buttons prev and next. How to make it so that there are only one controllers and all the 3 sliders rotate at once by clicking on them?

    1 answer 1

    So tnank you. I found everything myself =)

    I made the three sliders as separate, like this:

    var slider = $('.bxslider').bxSlider(); var slider2 = $('.bxslider2').bxSlider(); var slider3 = $('.bxslider3').bxSlider();

    Then I turned off the slider controllers and made my own arrows next slide and previous one:

      <p><a id="slider-next">Следующий слайд</a><br /> <a id="slider-down">Предыдущий слайд</a></p>

    And I wrote my own event handlers and calls to rewind methods:

     $('body').on('click', '#slider-next', function(){ slider.goToNextSlide(); slider2.goToNextSlide(); slider3.goToNextSlide(); return false; }); $('body').on('click', '#slider-down', function(){ slider.goToPrevSlide(); slider2.goToPrevSlide(); slider3.goToPrevSlide(); return false; });