CODEWITHSUNDEEP
jquerybxslider
Developer Strange
Developer Strange

Reputation: 2198

Viewport height is not setting correctly in bxslider jquery plugin

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

Upvotes: 3

Views: 6111

Answers (2)

nirali
nirali

Reputation: 29

if you try to change bxslider you see height in the following line

in this line set height inline so you try to set your slider image height first. or you can try to change using javascript

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

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.

Upvotes: 2

Related Questions