Question

我面临着bxSlider插件的愚蠢问题。我的滑块仅显示4张具有自动滑动模式的幻灯片。但是当有人点击某个特定的导航链接时，我会附加另一张与该链接相关的幻灯片。但是，当有人点击上一个/下一个控件并使用4个幻灯片重新加载默认滑块时，我想删除该新幻灯片。但它并不适用于上一个/下一个控制。

这是代码：

//Default Slider
var slider= $('.bxslider').bxSlider({
    displaySlideQty : 4,
    moveSlideQty : 4,
    maxSlides: 4,
    auto: true,
    autoStart: true,
    preloadImages: 'visible',
    mode: 'fade',
    pager: false,
});

//If someone clicks any link on navigation
$('#how').click(function(e){
  e.preventDefault();

  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
  }
  $('.bxslider').append('<li class="added"><a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/Jwjv7OLazVY?enablejsapi=1&wmode=opaque" title="Click to Watch The Vieo"><img src="img/video.jpg"/></a></li>');
  slider.reloadSlider({
    mode:'fade',
    auto: false,
    autoStart: false,
    pager:false,

  });
  slider.goToSlide(4);

});

当#How标签的幻灯片是当前幻灯片，然后如果我想点击任何next / prev控件我想删除幻灯片'li.added'并重新加载带有4张幻灯片的默认滑块。那是我尝试了以下代码

$('a.bx-next').click(function(e){
  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
    slider.reloadSlider({
    mode:'fade',
    auto: true,
    autoStart: true,
    pager:false,

  });
  }
});

但没有任何反应！有人可以帮我这个吗？我做错了什么？以下是Live testing site，方便您使用。

Answer 1

我发现每次调用reloadSlider时都需要绑定下一个按钮单击功能，因为它会重新绑定下一个上一个控件，因此如果你在页面加载时执行它，它将丢失事件绑定。因此，请在每次重新加载时重新绑定点击事件。

var bindNext = function(){

 $('a.bx-next').click(function(e){
  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
    slider.reloadSlider({
    mode:'fade',
    auto: true,
    autoStart: true,
    pager:false,

  });
  }
});

}

然后当你调用reloadSlider然后在调用它之后调用bindNext（）函数。

 $('#forSellers').click(function(e){
  e.preventDefault();

  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
  }

  $('.bxslider').append('<li class="added"><img src="img/seller.jpg" /></li>');
  slider.reloadSlider({

    auto: false,
    autoStart: false,
    pager:false,

    mode:'fade',
  });
  slider.goToSlide(4);

  bindNext();

});

它在我身边工作。

在Next / Prev控件单击事件上从bxSlider中删除滑块

1 个答案: