Bxslider

Question

如何从 bxslider 中删除幻灯片？

HTML:

<ul class="bx_slider">
<li>1 - <a href="#" class="remove">Remove</a></li>
<li>2 - <a href="#" class="remove">Remove</a></li>
<li>3 - <a href="#" class="remove">Remove</a></li>
</ul>

Jquery:

$(".bx_slider").bxSlider({
pager: false
});

https://jsfiddle.net/o2srcv28/

Answer 1

你可以这样做

var slider = $(".bx_slider").bxSlider({
    pager: false
});

$('.remove').click(function() {
    $(this).parent().remove();
    slider.reloadSlider();
});

看看这个updated fiddle

希望对您有所帮助。

（解决方案在 official doc）

编辑：

如评论中所述，当最后一张幻灯片被移除时，跳转到第一张幻灯片是不希望的。

一个可能的解决方案是

$('.remove').click(function() {
    
    $(this).parent().remove();
    
    slider.reloadSlider({
        pager: false,
        startSlide: slider.getCurrentSlide()-1 // Starts the slider on the previous slide
    });
});

结果可查here, or here (with more slides)

Bxslider - 如何删除幻灯片？

Bxslider - how to remove slide?

jquery

编辑：