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.