Search code examples
javascriptbxslider

BxSlider disable autoplay on certain width

Not sure if I'm blind or there isnt one. I want to stop bxSlider autoplay on certain width? Simple as that

Solution

  • Normally, you initiate bxSlider like so...

    $(document).ready(function(){
  $('.bxslider').bxSlider();
});

    Before initiation, you could check the width first using window.innerWidth, e.g.

    $(document).ready(function(){
    if (window.innerWidth >320) {
        $('.bxslider').bxSlider();
    }
});

    If you need to do this as well after initial loading of the page (i.e. rotating device) then you can destroy the slider like so:

    slider = $('.bxslider').bxSlider();
slider.destroySlider();

    If you need to do this after initial load, you'll need some way of detecting when to destroy the slider. jQuery has a method to check for this (orientationchange) which you can read here: https://api.jquerymobile.com/orientationchange/