bxSlider loses width when hidden & resizing the window

A bit of a title that: bxSlider loses width when resizing the window while bxSlider is hidden. Problem: bxSlider loses width when hidden. Exactly. I have a header in which i have a bxSlider (using a ul lists of li’s), this header is toggle-able (show/hide) by the user. When the user hides the header (and therefore hiding the bxSlider), the bxSlider resets the widths of li’s to 100px (no idea where that width comes from?).

So, to fix this strange behaviour, i have had to add a handler to the window so that when resizing, we set the widths of the li’s back to what they should be!

$(window).on(‘resize’, function()
$(‘#promotedItems li’).css(‘width’, ‘280px’);

This strikes me as a pointless fix for something that should not be happening. I may well not be understanding something about bxSlider (?), do let me know if that’s the case!


Nice, but with responsive enabled it already sort of does this. I had to add it to the options on load to fix it before the window resizes.

onSliderLoad: function(){$(‘.bxslider li’).css(‘width’, ‘632px’);}

Leave a Reply

Your email address will not be published. Required fields are marked *