bxslider multiple slider

run same controls on multiple slider

by cmoreira

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>
    
    <!-- slider 2 -->    
    <ul class="bxslider">
        <li>Slide 4</li>
        <li>Slide 5</li>
        <li>Slide 6</li>
    </ul>
    
    <!-- custom controls -->
    <div class="bxslider-controls">
      <a class="pull-left" href="#">PREV</a>
      <a class="pull-right" href="#">NEXT</a>
    </div>
    
</body>

CSS

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

JavaScript

// declare global
var slider_array = new Array();

jQuery(document).ready(function($){
    
    // launch bxslider
    $('.bxslider').each(function(i){
        slider_array[i] = $(this).bxSlider({controls:false});
    });
    
    
    // bind controls on custom controls, and run functions on every slider
    $('.bxslider-controls a').bind('click', function(e) {
      e.preventDefault();
    
      if($(this).hasClass('pull-left')) {
        $.each(slider_array, function(i,elem){
          elem.goToPrevSlide();  
        });
    
      } else if($(this).hasClass('pull-right')) {
        $.each(slider_array, function(i,elem){
          elem.goToNextSlide();  
        });
      }
    
    });
    
});