3

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

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

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

谢谢！

4

5 回答 5

4

我有同样的问题，但我使用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()
  })
});
于 2014-03-13T22:25:57.550 回答
2

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

解决方案是设置 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 的外观。

于 2013-07-25T23:21:19.770 回答
2

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

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

于 2013-08-18T16:43:17.673 回答
0

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

于 2013-06-28T17:53:44.960 回答
0

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

于 2014-05-20T11:10:35.370 回答