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

【问题标题】：How to fix horizontal scrollbar caused by jQuery FlexSlider?如何修复由 jQuery FlexSlider 引起的水平滚动条？
【发布时间】：2013-03-03 12:58:25
【问题描述】：

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

任何人都可以看看并提出修复建议吗？

【问题讨论】：

标签： jquery css web horizontal-scrolling flexslider

【解决方案1】：

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

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

【讨论】：

【解决方案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 中的那些元素

【讨论】：

如果你不需要它们，你可以在第 27 行的 scripts.js 中设置 directionNav: false，这应该会正确禁用箭头，
看了你的回答后，我也想起了directionNav。谢谢@magnum2002 :)

【解决方案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;
}

【讨论】：

【解决方案4】：

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

useCSS: false

例如：

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

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

【讨论】：

【解决方案5】：

试试这个：

.flex-direction-nav .flex-prev {
left: 0 !important;}

.flex-direction-nav .flex-next {
right: 0 !important;}

为我工作！ ;)

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
经过一些调整，这是最接近问题的解决方案。不幸的是，这是因为导航箭头已被左右 css 规则隐藏。但是当然应该更新这个答案以反映应该做什么以及在哪里放置这个代码等。