Question

Im using flexslider2 to show my slides.

But i have the problem, that the width of my li-elements are computed wrong at the first page load.

when i open firebug and click on the inline style, the width changes and everything is displayed correctly. Also when I just resize my browser, everything is correct.

Why do I have this problem?

When i look into the flexslider code, i find this:

 slider.computedW = slider.itemW - slider.boxPadding;

which should be alright …. because on resize, it only uses the computedW:

  if (vars.smoothHeight) methods.smoothHeight();
        slider.newSlides.width(slider.computedW);
        slider.setProps(slider.computedW, "setTotal");

please help me!!!

Answer 1

Do you have your flexslider inside a container? If so you can set flexslider to automatically adjust to that specific height when the page loads.

  $(document).ready(function(){
  var containerheight = $(".flexcontainer");    
  var borderWidth = $('.flexslider').css('height', containerheight.outerWidth());
    });

Also, if your container is slightly another height than your flexslider should be you can use below. (The “5” is by how many pixels you want to change the height with)

  $(document).ready(function(){
  var containerheight = $(".flexcontainer");
  containerheight = containerheight -5;
  var borderWidth = $('.flexslider').css('height', containerheight.outerWidth());
    });