How to reload Javascript on browser resize? BXslider carousel

Question

I am using BXslider carousel and want to display specific number of static slides in carousel as per screen width.

I tried to use jQuery resize(), but it is not working properly. You can see working demo here: pepnest.com/hbs

Here, when you resize browser, it cuts down height of slides.

This is my code in JS file:

$(document).ready(function(){

    var width = $(window).width();

    if (width < 368) {
        $('.bxslider').bxSlider({
          minSlides: 1,
          maxSlides: 1,
          slideWidth: 200,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 700) {
        $('.bxslider').bxSlider({
          minSlides: 1,
          maxSlides: 1,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 980) {
        $('.bxslider').bxSlider({
          minSlides: 2,
          maxSlides: 2,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 1200) {
        $('.bxslider').bxSlider({
          minSlides: 3,
          maxSlides: 3,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else {
        $('.bxslider').bxSlider({
          minSlides: 4,
          maxSlides: 4,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    }
 $(window).resize(function(){
    var width = $(window).width();

    if (width < 368) {
        $('.bxslider').bxSlider({
          minSlides: 1,
          maxSlides: 1,
          slideWidth: 200,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 700) {
        $('.bxslider').bxSlider({
          minSlides: 1,
          maxSlides: 1,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 980) {
        $('.bxslider').bxSlider({
          minSlides: 2,
          maxSlides: 2,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 1200) {
        $('.bxslider').bxSlider({
          minSlides: 3,
          maxSlides: 3,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else {
        $('.bxslider').bxSlider({
          minSlides: 4,
          maxSlides: 4,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    }
 });

});

Can anyone help me where I am going wrong?

Answer 1

I'm sorry to say that this is not the way. Imagine your browser initializing a new slider at every pixel of movement you make re-sizing it.

You have to destroy the bxSlider before initializing a new one!

slider.destroySlider();

http://bxslider.com/options

Besides that, you really do not have to fire the event at every re size action. Please check first if a 'redraw' is necessary (e.g. re sizing from 1020 to 1080 px doesn't need it)

For example using jQuery:

http://jsfiddle.net/r91ec9n6/3/

var resolutionLimits = [0, 368, 700, 980, 1200];
var currentResolutionLimit = null;

var resizeHandler = function()
{
    var foundResolution = 0;
    var windowSize = $(window.document).width();
    for(var i = 0; i < resolutionLimits.length; i++)
        foundResolution = windowSize > resolutionLimits[i] ? i : foundResolution;

    if(foundResolution !== currentResolutionLimit){
        currentResolutionLimit = foundResolution
        var currentResolution = resolutionLimits[currentResolutionLimit];

        // This is only called when the resolution is changed beyond a limit AND at document load
        $(window.document.body).empty().append('Resolution changed, currently > ' + currentResolution);

    }

}

$(window).resize(resizeHandler).resize();