CODEWITHSUNDEEP
javascriptjqueryslideshowbxslider
Steven Brand
Steven Brand

Reputation: 41

Bx-slider multiple slider custom controls

I am using the bx-slider plugin to build multiple sliders on a single page. Each slider has a class name associated with it and custom prev/next buttons. Please note they are not unique. This is because the page is dynamic. I am confused on how to initiate the slider so that the custom next/prev buttons only toggle the slides closest to the buttons. Here is what i am thinking:

<div class="slider">
    <a class="prev" href="#">prev</a>
    <ul>
       <li>Slide 1</li>
       <li>Slide 2</li>
    </ul>
    <a class="next" href="#">next</a>
</div>

<div class="slider">
    <a class="prev" href="#">prev</a>
    <ul>
       <li>Slide 1</li>
       <li>Slide 2</li>
    </ul>
    <a class="next" href="#">next</a>
</div>

Upvotes: 2

Views: 2255

Answers (1)

VJS
VJS

Reputation: 1017

You can save the list of sliders in an array. Whenever your custom controls are clicked, you can find out the closest '.bxslider' class and find it index in the entire page. Using that index, you can call the slider object from the array and invoke the prev or next events. 

  var slider_array = new Array();
  $('.bxslider').each(function(i){
     slider_array[i] = $(this).bxSlider({controls:false});
  });


  $('.bxslider-controls a').bind('click', function(e) {
  e.preventDefault();

  if($(this).hasClass('pull-left')) {
      var obj = $(this).parent().parent().find('.bxslider');
      var index = $('.bxslider').index(obj);
      slider_array[index].goToPrevSlide();  


  } else if($(this).hasClass('pull-right')) {
    var obj = $(this).parent().parent().find('.bxslider');
      var index = $('.bxslider').index(obj);
      slider_array[index].goToNextSlide();  
  }

});

Added jsfiddle for this http://jsfiddle.net/atgshbnv/

Upvotes: 2

Related Questions