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

Question

我面对bxSlider插件的一个愚蠢问题。我的滑块仅显示4张带自动滑动模式的幻灯片。但是当有人点击一个特定的导航链接时，我正在追加与该链接相关的另一张幻灯片。但是当有人点击prev/next控件并用4张幻灯片重新加载默认滑块时，我想删除新的幻灯片。但它不适用于prev/next控件。

下面是代码：

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

}); 

当＃如何标记的幻灯片是当前幻灯片，然后如果我想点击任何一个/上控制，我想删除幻灯片“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(); 

}); 

它在我身边工作。