jQuery - bxSlider plugin reloadSlider issues

Question

I'm using jQuery with the bxSlider plugin, here is the link to it just incase: http://bxslider.com/

I'm trying to reload the slider and my custom pager after I've removed certain slides from it.

Here is what I have tried:

$(function() {
    var slider = $('#slider').bxSlider({
        pagerCustom: '#bx-pager'
    });

    $('.list').on('click', '.delete', function() {
        image = $(this).closest('li').find('[type="hidden"]');

        // image.attr('id') contains a string: image-0, image-1, image-2, etc.
        $('#slider, #bx-pager').find('.' + image.attr('id')).remove(); 

        slider.reloadSlider({
            pagerCustom: '#bx-pager'
        }); // I have also tried: slider.reloadSlider();
    });
});

It works partially. What happens is the slider gets reloaded just fine but it removes the pager completely when it runs the reload.

Thank you very much for any help.

Answer 1

As long as I see, this is a bug in bxSlider, in fact, when you call the reloadSlider method, internally are called the methods destroySlider and init.

In the destroySlider method the pagerEl element is destroyed, this is right if you are not using a custom one, because it is recreated programmatically in the init method, but if you are using a custom one it can't be recreated programmatically.

I ended up modifying the destroySlider method to check if a custom pager is used, in this case it must not be deleted.

Here is the before (line 1294):

if(slider.pagerEl) slider.pagerEl.remove();

And after:

if (slider.settings.pagerCustom === '') {
    if(slider.pagerEl) slider.pagerEl.remove();
}

I'll post the bug on GitHub as soon as I have the time.