Flexslider Slide Width Issue

Question

I have a strange issue using flexslider. The Slide LIs don't get the correct width so that all slides are shown. This only occurs on first page load. As soon as I switch to another tab and switch back everything looks fine. Maybe a JS Loading Problem?!

Screenshot: here

flexslider.css

.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {text-align: center; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides li.flex-active-slide img {text-align:center; width: auto; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); }

JS

$(window).load(function() {
    $('.flexslider').flexslider({
        controlNav: true,
        directionNav: true
    }); 
});

I've tried it with $(document).ready(function() too, but still the same problem.

Any ideas?

Answer 1

Well, Werner.

I ended up with your solution. Unfortunately.

This is otherwise another way to do it.

/* SLIDERS in content */
$('.flexslider').flexslider({
    animation: "slide", 
    start: function(slider){
        $('.flexslider').resize();
    }
});

The reason I chose not to use the above code is that there was a delay and made a little jump when the slides updated to the correct width.

If anyone has a cleaner solution - please tell me. I am using the latest flexslider there is - and this issue only seems to occur sometimes. But when it does... arghhh.

Answer 2

I had the same problem.

At first load in a session, Flexslider get the width of the slider container which, if it is not explicit, has value 0px. Then slides have width 0px and you can't see them.

To avoid this problem is sufficient to fix a width in slider container, in my case 604px:

<div class="flexslider" style="width: 604px">
    <ul class="slides">
        <li>
            <img id="slide1" />
        </li>
        <li>
            <img id="slide2" />
        </li>
    </ul>
</div>

Answer 3

This code/order below may help; well at least I have had success with it.

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script>
$(document).ready(function(){
    $('.flexslider').flexslider({
        controlNav: true,
        directionNav: true,
     });
}); 
</script> 

Answer 4

I resolved this issue by removing minItems in my flexslider call. Seems to work with maxItems though.

Answer 5

I found out why it was doing this, and it is pretty simple.

It is because of CSS!!! on the ul in the slider.

take off the paddings and the margins on the ul.slides

.slides{
    padding:0;
    margin:0;
}

after i did THIS the resizing worked perfect every time on all browsers and mobile.

Answer 6

For me, the problem was the markup. I had this:

<div class='carousel-slides'>
  <div class='carousel-slide'></div>
  <div class='carousel-slide'></div>
</div>

---

$('.carousel-slides', context).flexslider({
  selector: '.carousel-slide'
});

... but it seemed that it needed to be applied to an inner div on each slide, which is ridiculous.

<div class='carousel-slides'>
  <div class='carousel-slide'>
    <div class='carousel-slide-inner'></div>
  </div>
  <div class='carousel-slide'>
    <div class='carousel-slide-inner'></div>
  </div>
</div>

---

$('.carousel-slides', context).flexslider({
  selector: '.carousel-slide > .carousel-slide-inner'
});

Answer 7

Maybe it's a bit late for another answer, but after trying all the answers here and in other forums, I ended up with my own solution, similar to others, but at least I find it pretty coherent and clean.

I had the problem in mobile environment, where the slider is inside a tab that is opened as soon one clicks on the title. The content was in display:none, and this causes the problem to flexslider (v. 2.5), that is not able to determine the correct width of the contained slides.

So i corrected my css and put the container hidden by playng with visibility and opacity.

Html sampl

<dd class="tab-container with-slider">
    <div class="flexslider">
       <ul class="slides">
          <li>whatever </li>
       </ul>
    </div>
</dd>

Css:

/*all other containers behave well with display none/block so I leave them with normal behavior*/
 .parent dd.tab-container {  
        display: none; position: relative; 
 }
/*container with flexslider inside uses visibility and opacity to be hidden*/  
.parent dd.tab-container.with-slider{ 
     display: block; 
     height: 0px; 
     visibility: hidden; 
     opacity: 0;
 } 
.parent.accordion-open dd.tab-container.with-slider{ 
     height: auto; 
     visibility: visible; 
     opacity: 1;
 }

Js is straighforward from the basic example, nothing more.

$j('.myTabOpener').click(function () {  
    var mySlider = $j(this).find('.flexslider');
    mySlider.flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 210,
        itemMargin: 5,
        minItems: getGridSize(), 
        maxItems: getGridSize()
    });  
}); 

Answer 8

I faced the same issue with flexi slider.

Tried above mentioned solutions, but it didn't work for me.

I tried to updated css with following code as turn-around for this issue.

.flexslider .slides {
zoom: 1.1 !important;
}

It fixed the problem. You can try this code and let me know if it worked for you or not.