多个幻灯片上的公共方法bxslider

我有多个幻灯片，即时通讯使用此代码：

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

但它不起作用……任何人都知道为什么会这样？

谢谢！

Answer 1

我在一个页面上有多个滑块时遇到同样的问题：用于控制幻灯片的公共函数不起作用（与您的示例中的方法相同）。

解决方案是设置controls = true并为每个实例创建唯一的’prevSelector’和’nextSelector’。 这样，bxslider-instance就有了每个唯一的prev en按钮（图像或者你在那里填写的任何文本）。 我认为我不需要将bxslider连接到唯一div（id）的方式。

这个实现适用于我的childid作为唯一性的绑定var：

Html（/ php）：

 
 
 
slide1
 
slide2
 
 
 

使用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: "", prevText: "", prevSelector: "#previousperiod_"+childid, nextSelector: "#nextperiod_"+childid, onSlideBefore: function($slideElement, oldIndex, newIndex) { //handle appearance prev- and nextSelectors } }); }); 

您可以使用回调函数来处理prev-和nextSelectors的外观。

Answer 2

我有同样的问题，但我解决了使用each选择器和对象数组。 有一个“很多”的parent().parent().parent()但是它有效！

请注意，我使用自定义next和prev链接，它们必须位于滑块容器外部。

看看我的脚本http://jsfiddle.net/33Jjr/1/

HTML

 
 prev next 
 
 
 
 
 
 
 prev next 
 
 
 
 
  

和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

我找不到多个滑块和公共function的任何问题。

  $(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有多行。

Answer 4

我希望， jquery.bxslider.min.js会自动处理上面的过程，那么为什么要为此编写单独的脚本呢？ 和bxslider脚本完美地工作。

Answer 5

我注意到只有在我的’模式’设置为’水平’或’垂直’时才会出现此问题。 对于“淡入淡出”模式，它可以毫无问题地工作。