bxSlider reloadSlider() is undefined after page load

Question

I'm working on an intime upload+refresh gallery (AJAX and jQuery based) application.

I can upload multiple images with drag & drop and after uploading. I have to see how will look like the new gallery with the uploaded elements, which is in a bxslider based carousel (without page reload). I've done this successfully with the upload-refresh part. However when refreshing the slides the bxslider attributes from configuration are being lost.

When I want to use the reloadSlider() function I see the following error in Chrome console:

Cannot read property 'reloadSlider' of undefined

$(document).ready(function() {
  $('.gallery_output').bxSlider({
    slideWidth: 222,
    minSlides: 1,
    maxSlides: 5,
    pager: false,
    slideMargin: 0
  });
});

function refresh_slider() {
  var sliderToRefresh = $('.gallery_output').bxSlider({
    auto: true,
    controls: true
  });
  sliderToRefresh.reloadSlider();
}

UPDATE: I added a button to trigger the event, but got the same error.

$('#refresh').click(function(){
    var sliderToRefresh; 
    sliderToRefresh = $('.gallery_output').bxSlider({
        auto: true,
        controls: true
    });
    sliderToRefresh.reloadSlider();
});

Overall I just want to reload the bxSlider with a triggered function, without page reload. Any ideas why the reloadSlider() doesn't work?

dev dev · Accepted Answer · 2019-01-18T10:07:02

You're defining the bxSlider in .gallery_output then trying to access it on #gallery_output :)

bxSlider reloadSlider() is undefined after page load

1 Answers