我有多个幻灯片，我正在使用此代码：
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;
});
但它不起作用......有人知道这是为什么吗？
谢谢！
【问题讨论】：
标签： jquery bxslider public-method
我注意到只有当我的“模式”设置为“水平”或“垂直”时才会出现此问题。 对于“淡入淡出”模式，它可以正常工作。
【讨论】：
我遇到了同样的问题，但我使用each 选择器和对象数组解决了。
有“很多”parent().parent().parent()，但它有效！
注意，我使用的是自定义 next 和 prev 链接，它们必须位于滑块容器之外。
看看我的脚本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>
还有 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()
})
});
【讨论】：
我没有发现多个滑块和公共功能有任何问题。
$(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()
});
});
我的代码运行良好.. bxslider with multiple rows.
【讨论】：
我在一个页面上使用多个滑块时遇到了同样的问题：用于控制幻灯片的公共功能不起作用（与您在示例中所做的相同）。
解决方案是设置 controls=true 并为每个实例创建唯一的“prevSelector”和“nextSelector”。这样，bxslider-instance 具有每个唯一的 prev en next-buttons（图像或您在其中作为文本填写的任何内容）。 我认为不需要将 bxslider 连接到唯一 div(id) 的方式。
此实现适用于我，将 childid 作为唯一性绑定变量：
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
}
});
});
您可以使用回调函数来处理 prev- 和 nextSelector 的外观。
【讨论】：
我希望jquery.bxslider.min.js会自动处理上述过程，那为什么要为此编写单独的脚本呢？和 bxslider 脚本完美运行。
【讨论】：