如何修复由jQuery FlexSlider引起的水平滚动条？

Question

jQuery FlexSlider在这里导致水平滚动条：http://abhinavsood.com/labs/grab/ 我在flex-container上尝试了overflow-x: hidden，但它似乎无法解决它。

有人可以看看并建议修复吗？

Answer 1

实际上是你的.flex-direction-nav .flex-next锚点导致它。

我通过将right: 0;应用于它来修复它。

Answer 2

.flex-direction-nav .flex-next {
background-position: 100% 0;
right: -36px;
}

.flex-direction-nav .flex-prev {
left: -36px;
}

删除left和right -36px，我在页面上看不到任何箭头，所以你可以删除flex-direction-nav div中的那些元素

Answer 3

我通过编辑以下两件事来管理它：

在style.css的第329行添加

overflow:hidden !important;

.flexslider .slides > li {
position:relative;
overflow:hidden !important;
}

和372至385

bottom:10px; left: 10px;overflow: hidden;

.flexslider.position-caption-bottom-left .flex-caption{
bottom:10px;
left: 10px;
overflow: hidden;
text-align:left;

}
.flexslider.position-caption-bottom-right .flex-caption {
bottom:10px;
left: 10px;
overflow: hidden;
text-align:right;
}
.flexslider.position-caption-bottom-centered .flex-caption {
bottom:10px;
left: 10px;
overflow: hidden;
text-align:center;
}

Answer 4

我设法解决这个问题的唯一方法是在选项中添加：

useCSS: false

例如：

 $('.flexslider').flexslider({
    animation: "slide",
    useCSS: false
  });

因为当它设置为true时，元素ul.slides变为1000％宽并导致浏览器生成水平滚动条。