Jquery Flexslider滑动空白

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

当我尝试检查DOM时，我发现临时修复方法是删除

float:left

或

margin right:-100%

，这是

li

的内联样式-中的内容，但之后它会中断滑动。当您单击下一张幻灯片的箭头时，会将第一张幻灯片向下移动，显示第二张幻灯片，然后隐藏第一张幻灯片

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

请注意，我在1920x1080分辨率上没有这个问题，但在更低分辨率上，例如1024x768

---

有什么问题吗？另外，这里还有一个指向live demo的链接：

我在开始选项中添加了flexslider.resize（）函数，效果很好

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

---

我在开始选项中添加了at

flexslider.resize（）

函数，效果很好

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

---

在最近的一些项目中，我偶尔会遇到一些问题，我的网页上的flexslider图像库添加了一些奇怪的额外白色边距。（比如50-100px左右的空白）在整个左手边或整个右手边

我最终改变了flexslider.css中的一些

css

规则（特别是针对2.2.0版），我认为这是由于导航箭头的隐藏和显示方式，特别是它们的css造成的

我更改/合并了一些箭头显示方式的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;}
}

我觉得这个空白的问题在这里也讨论得很好。

---

最近在一些项目中，我的网页上的flexslider图像库添加了一些奇怪的额外白色边距，偶尔会遇到一些问题。（比如50-100px左右的空白）在整个左手边或整个右手边

我最终改变了flexslider.css中的一些

css

规则（特别是针对2.2.0版），我认为这是由于导航箭头的隐藏和显示方式，特别是它们的css造成的

我更改/合并了一些箭头显示方式的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;}
}

我觉得这个空白的问题在这里也讨论得很好。

---

可能是CSS。尝试添加

最大宽度：100%；高度：图像上的自动

。

可能是CSS。尝试添加

最大宽度：100%；高度：图像上的自动

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

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

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