2
votes

I am using bxSlider and I have this code for going to a certain slide from another page:

var configSlider;

$(function() {
    configSlider = $('.configslider').show().bxSlider({
          adaptiveHeight: false,
          controls: false,
          preloadImages: 'visible',
          autoStart:false
    });

    var hash = window.location.hash.substring(1);

    if(hash == 'container') {
        configSlider.goToSlide(1);
    }
})

The actual slider behaves correctly, i.e, it goes to the correct slide. My issue is that the pager (dots below the slider) don't update. Even though I am on slider #2, the pager shows that I'm on slider #1. Seems like I need to remove/add 'bx-pager-item' class to each pager item, but I'm not exactly sure how this is done. My attempts have been futile.

TIA

I'm having the same problem right now. I know it's been a year since the question's been asked, but I'll try to post a solution here for any future googlers. - XanatosLightfiren
For me the problem was related to re-instantiation of bxSlider, i.e. I was calling bxSlider constructor again during the event, which changed the slide with an API call. When I issued the method on the original bxslider object, the problem disappeared. There is a helpful Github issue available at github.com/stevenwanderski/bxslider-3/issues/215 - XanatosLightfiren