1

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

当我尝试检查 DOM 时，我发现临时解决方法是删除float: left或margin-right: -100%采用 的li内联样式 -但它会在之后破坏滑动。发生的情况是，当您单击下一张幻灯片的箭头时，它会将第一张幻灯片向下移动，显示第二张幻灯片，然后隐藏第一张幻灯片。

显示滑块问题的图像

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

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

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

4

4 回答 4

1

我flexslider.resize()在 start 选项中添加了 at 功能，它工作正常。

$('.flexslider').flexslider({
   start: function(slider){
     $('body').removeClass('loading');
        $('.flexslider').resize();
   }
});
于 2013-07-23T20:12:45.420 回答
0

它可能是CSS。尝试添加max-width: 100%; height: auto图像。

于 2014-04-03T09:36:33.630 回答
0

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

我最终更改了css内部的一些规则flexslider.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;}
}

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

于 2014-02-14T15:26:17.627 回答
0 
$('.flexslider').flexslider({
  useCSS: false
});

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

于 2015-11-13T22:42:26.593 回答