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

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.