多个幻灯片上的公共方法bxslider [英] Public methods bxslider on multiple slideshows

问题描述

我有多个幻灯片演示，并且我正在使用此代码:

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?

谢谢！

推荐答案

在一页上有多个滑块时，我遇到了同样的问题:用于控制幻灯片的公共功能无法正常工作(与示例中的方法相同).

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).

解决方案是设置controls = true，并为每个实例创建唯一的"prevSelector"和"nextSelector".这样，bxslider-instance具有每个唯一的上一个next按钮(图像或您在其中填写的任何文本). 我认为不需要将bxslider连接到唯一的div(id)的方式.

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.

此实现对我有用，childid作为绑定var以获得唯一性:

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

HTML(/php):

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:

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
        }
    });
});

您可以使用回调函数来处理prev-和nextSelector的出现.

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

这篇关于多个幻灯片上的公共方法bxslider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！