Flexslider滑动白色空间

Question

我正在使用Flexslider，并遇到一个奇怪的问题：每张幻灯片都向右移动，每张幻灯片的左侧都有一部分空白区域。

当我尝试检查DOM时，我发现临时修复是删除float: left内联样式中的margin-right: -100%或li - 但是它打破了之后的滑动。当您单击下一张幻灯片的箭头时，它会向下移动第一张幻灯片，显示第二张幻灯片，然后隐藏第一张幻灯片。

如果我不使用内联样式进行干预，滑块仍然在左侧有空白区域，在我向下滚动页面并返回后，滑块按预期工作，没有问题。

请注意，我在1920x1080分辨率下没有此问题，但在较低时 - 例如1024x768。

可能是什么问题？另外，这里是现场演示的链接：http://goo.gl/RGS4O

Answer 1

我在启动选项中添加了flexslider.resize()函数，它运行正常。

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

Answer 2

在最近的一些项目中，我偶尔会在我的网页上出现一些flexslider图库的问题，这会增加一些奇怪的额外白边。 （就像50-100px左右的白色空间一样）在整个左手边或整个右手边。

我最终更改了css内的flexslider.css规则（特别是版本2.2.0）我认为这是由隐藏和显示导航箭头的方式引起的，特别是它们的CSS。 / p>

我更改/合并了一些CSS，了解箭头的显示方式，使其永久化：

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

我使用媒体查询删除了有关箭头的以下css：

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

我觉得这个白色空间问题也在这里讨论得很好。 https://drupal.org/node/1695136

Answer 3

可能是CSS。尝试在图片上添加max-width: 100%; height: auto。

Answer 4

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

在您的配置中添加此行，它将正常工作。