Question

我有多个幻灯片，我正在使用此代码：

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

我遇到了同样的问题，但我使用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()
  })
});

Answer 2

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

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

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

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-选择器和nextSelectors的外观。

Answer 3

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

 $(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.

Answer 4

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

Answer 5

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

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

5 个答案: