Viewport height is not setting correctly in bxslider jquery plugin

Question

I am working on bx slider jquery plugin. Some times the viewport height is not setting correctly. this will happen when the slider is getting loaded first time. If i click the next or prev button once the viewport is set correctly.I checked in bxSlider.js also, it also return the wrong value.That shows that have only one children(image), but i use 5 images. I set width as 250 px but it returns 953px..The below Plugins are i used.

https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css http://bxslider.com/js/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js

Answer 1

If there are changes to how your page loads, say like adding an extra plugin, bxSlider will fail to finish it's calculations and it won't complete it until there's a repaint. Typically done by making the bxSlider move next or prev. I fixed this behavior by forcing bxSlider to recalculate while loading. Here's 2 suggestions, the first one is passive and minimal, the second one is aggressive and excessive. I suggest try the first one by itself and if it doesn't work, use both of them together.

Fix #1. Add the following ruleset to either the bottom of your stylesheet, or the last line of a <style> block:

.bx-viewport.bx-viewport { min-height: 90vh !important; }

This doubling up on the class selector might look odd, but it will increase the selector's selectivity, the !important is optional as is the double selector. This is the Fix #1 down to it's essentials:

.bx-viewport { min-height: 90vh; }

Fix #2. Place this JS before the closing </body> tag:

document.documentElement.addEventListener('DOMContentLoaded', function(event)  {
    var $tgt = $('.bx-viewport')[0];
    var tgt = document.querySelector('.bx-viewport');
    tgt.style.height = ""
    tgt.removeAttribute('height');
    tgt.style.removeProperty('height');
    $tgt.css('height', '');
    $tgt.removeAttr('height');

}, false);

Most of the time using Fix #1 will be enough. Fix #2 is excessive but it always works.