Public methods bxslider on multiple slideshows

Question

I have multiple slideshows and im using this code:

var demo = $('.demo').bxSlider({
mode: 'horizontal',
captions: false,
touchEnabled: true,
controls: false,
pager:false
});

$('.slider-next').click(function(){
demo.goToNextSlide();
return false;
});

$('.slider-prev').click(function(){
demo.goToPrevSlide();
return false;
}); 

but it does not working... any one have a idea why is that?

Thanks!

Answer 1

I had the same problem with multiple sliders on one page: public functions for controling the slides didn't work (the same way you do in your example).

The solution is to set controls=true and create unique 'prevSelector' and 'nextSelector' for each instance. This way the bxslider-instance have each unique prev en next-buttons (images or whatever you fill in there as text). The way I connect the bxslider to a unique div(id) is not required I think.

This implementation works for me with the childid as binding var for uniqueness:

Html (/php):

<div id="previousperiod_<?=$this->child->getId()?>"></div>
<div class="bxslider" id="bxslider_<?=$this->child->getId()?>" childid="<?=$this->child->getId()?>">
    <div>slide1</div>
    <div>slide2</div>
</div>
<div id="nextperiod_<?=$this->child->getId()?>"></div>

Javascript:

$("div.bxslider").each(function() {
    var childid = $(this).attr("childid");
    var sliderid = $(this).attr("id");
    $("div#"+sliderid).bxSlider({
        infiniteLoop: false,
        pager: false,
        controls: true,
        nextText: "<img src=\"img/icon/arrow_right.png\"/>",
        prevText: "<img src=\"img/icon/arrow_left.png\"/>",
        prevSelector: "#previousperiod_"+childid,
        nextSelector: "#nextperiod_"+childid,
        onSlideBefore: function($slideElement, oldIndex, newIndex) {
            //handle appearance prev- and nextSelectors
        }
    });
});

You can use the callback functions to handle appearance of the prev- and nextSelectors.

Answer 2

I had the same problem, but I solved with using each selector and object array. There are a "lot" of parent().parent().parent() but it works!

Notice, I am using custom next and prev links, an they must be outside slider container,.

Take a look at my script http://jsfiddle.net/33Jjr/1/

HTML

<div class="category-slider"> 
<a href="" class="prev">prev</a>  
<a href="" class="next">next</a> 
  <ul>
    <li><img src="http://placehold.it/350x150&text=FooBar1" /></li>
    <li><img src="http://placehold.it/350x150&text=FooBar2" /></li>
    <li><img src="http://placehold.it/350x150&text=FooBar3" /></li>
  </ul>
</div>

<div class="category-slider"> 
<a href="" class="prev">prev</a>  
<a href="" class="next">next</a> 
  <ul>
    <li><img src="http://placehold.it/350x150&text=FooBar7" /></li>
    <li><img src="http://placehold.it/350x150&text=FooBar8" /></li>
    <li><img src="http://placehold.it/350x150&text=FooBar9" /></li>
  </ul>
</div>

And Javascript

var swipes = []
$('.category-slider > ul').each(function (i, obj) {
swipes[i] = $(this).bxSlider({
    mode: 'horizontal',
    slideWidth: 200,
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 1,  
    slideMargin: 0,
    pager: false,
    controls:false
})

$(this).parent().parent().parent().find('.prev').on('click', function (e) {
    e.preventDefault()
    swipes[i].goToPrevSlide()
})

$(this).parent().parent().parent().find('.next').on('click', function (e) {
    e.preventDefault()
    swipes[i].goToNextSlide()
  })
});

Answer 3

I couldn't find any problem with multiple sliders and public functions.

 $(document).ready(function(){
  var slideobj3=$('.slider1').bxSlider({
    mode: 'horizontal',
    slideWidth: 200,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 0,
    pager: false,
    controls:false
  });
  var slideobj2=$('.slider2').bxSlider({
    mode: 'horizontal',
    slideWidth: 200,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 0,
    pager: false,
    controls:false
  });
  var slideobj1=$('.slider3').bxSlider({
    mode: 'horizontal',
    slideWidth: 200,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 0,    
    pager: false,
    controls:false
  }); 
  $('#test').click(function (){
      slideobj1.goToNextSlide()
      slideobj2.goToPrevSlide()
      slideobj3.goToNextSlide()

    });
});

My code is working well.. bxslider with multiple rows.

Answer 4

I hope, jquery.bxslider.min.js will automatically handle the above process, then why should write separate script for this? and bxslider script working perfectly.

Answer 5

I had notice that this issue only appears if my 'mode' was set to 'horizontal' or 'vertical'. For 'fade' mode it works without any problems.