Flexslider幻灯片空白

Question

I'm using Flexslider, and encountering a strange problem: every slide is shifted to the right, with a portion of white space on the left side of each slide.

When I try to inspect the DOM, I find that temporary fix is to either remove float: left or margin-right: -100% that's in li 's inline style - BUT it breaks the sliding afterwards. What happens is that when you click arrow for the next slide, it shifts the first one down, shows the second, and then hides the first one.

If I don't intervene in anyway with inline styles, slider still has white space to the left, and after I scroll down the page and return up, the slider works as expected, with no problem.

Note that I don't have this problem on 1920x1080 resolution, but on lower - 1024x768 for example.

What could be the problem? Also, here's a link to live demo: http://goo.gl/RGS4O

Answer 1

I have added at flexslider.resize() function in start option and it works fine.

$('.flexslider').flexslider({
   start: function(slider){
     $('body').removeClass('loading');
        $('.flexslider').resize();
   }
});

Answer 2

On some projects lately I occasionally get some issues with a flexslider image gallery on my webpage adding some strange extra white margins. (Like 50-100px or so of white space) on either the entire lefthand, or entire righthand side.

I ended up changing some of the css rules inside flexslider.css (specifically for version 2.2.0) I believe it was caused by how the navigation arrows are hidden and shown, specifically their CSS.

I changed/merged some CSS for how the arrows appear, making them permanent:

.flex-direction-nav .flex-prev { opacity: 1; left: 10px; }
.flex-direction-nav .flex-next { opacity: 1; right: 10px; text-align: right; }

I removed the following css regarding the arrows using a media query:

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}

I feel this issue of white space is also discussed well here. https://drupal.org/node/1695136

Answer 3

It may be CSS. Try adding max-width: 100%; height: auto max-width: 100%; height: auto on the images.

Answer 4

$('.flexslider').flexslider({
  useCSS: false
});

Add this line in your configuration it will work properly.