如何使flexslider上的方向导航保持不变？答案

【问题标题】：How to make the direction nav constant on flexslider?如何使flexslider上的方向导航保持不变？
【发布时间】：2013-03-23 14:00:43
【问题描述】：

我希望小悬停灰色箭头在悬停在缩略图导航上时显示块而不是动画。你可以看到演示here。我一直在涉水插件的 javascript 并且无法为我的生活找出动画箭头的位置。如果可以的话，我只会注释掉该代码。那么其他人可以吗？

【问题讨论】：

标签： javascript jquery plugins flexslider

【解决方案1】：

这让我困惑了一会儿，但事实证明箭头动画实际上并不在插件 javascript 中。它在 CSS 中使用-webkit-transition: all .3s ease;。如果您查看默认 CSS 文件并转到第 52 行，您需要从.flex-direction-nav a 中删除上述内容。所以这条线应该如下所示。

.flex-direction-nav a {
   width: 30px; 
   height: 30px; 
   margin: -20px 0 0; 
   display: block; 
   background: url(images/bg_direction_nav.png) no-repeat 0 0; 
   position: absolute; 
   top: 50%;
   z-index: 10; 
   cursor: pointer; 
   text-indent: -9999px; 
   opacity: 0;
}

【讨论】：

您先生，真是个天才。谢谢。
为了在我的情况下工作，我还必须删除 opacity:0
如果您不想更改主要的 css 文件，请将以下内容添加到您自己的 css 文件中.flexslider .flex-next {opacity: 0.8; right: 5px;} .flexslider .flex-prev {opacity: 0.8; left: 5px;}
对于我来说，我还必须覆盖位置并使其成为初始位置而不是绝对位置。
看起来您唯一需要覆盖的是 a.flex-disabled ，它是触发过渡和不透明度的方式。给 a.flex-disabled{ display: block;不透明度：1！重要； }

【解决方案2】：

我最近遇到了这个问题并通过覆盖以下样式解决了它（在这个问题/答案的帮助下）：

.flex-direction-nav a {
    ...
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

在我自己的 css 中使用这些样式：

.flexslider .flex-direction-nav a.flex-prev,
.flexslider .flex-direction-nav a.flex-next {
    ...
    -moz-transition: none;
    -webkit-transition: none;
    transition: none;
}

我非常喜欢不修改库提供的源代码，所以我认为这是一个更好、更完整的解决方案。

【讨论】：

【解决方案3】：

很简单，把下面的css代码改成这样：

.flexslider .flex-direction-nav .flex-next {
    right: 5px; /* adjust offset to match the hover style */
    opacity: .8; /* adjust opacity to match the hover style */
}

.flexslider .flex-direction-nav .flex-prev {
    left: 5px; /* adjust offset to match the hover style */
    opacity: .8; /* adjust opacity to match the hover style */
}

【讨论】：

【解决方案4】：

制作自己的箭头：禁用directionNav 并使用manualControls。

【讨论】：

我认为这不会。我只需要一些可以阻止那些箭头动画的东西。从 JS 中看不到是什么让它们这样做。
禁用directionNav 将完全阻止箭头出现。