Bxslider - how to remove slide?

Question

How to remove slide from 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

You can do something like that

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

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

Take a look at this updated fiddle

Hope it may helps you.

(the solution was in the official doc)

---

Edit:

As asked in comment the jump, when the last slide is removed, to the first one was not desired.

A possible solution would be

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

Result can be check here, or here (with more slides)