javascript 如何使 flexslider 上的方向导航恒定？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15587624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the direction nav constant on flexslider?
提问by Claire
I want the little hover grey arrows to be display block and not animate when hovering over the thumbnail navigation. You can see the demo here. I have been wading through the javascript for the plugin and cannot for the life of me work out where it is animating the arrows. If I could, I would just comment out that code. So can anyone else?
我希望将小悬停灰色箭头悬停在缩略图导航上时显示块而不是动画。您可以在此处查看演示。我一直在浏览插件的 javascript，但我一生都无法弄清楚它在哪里为箭头设置动画。如果可以，我会注释掉该代码。那么其他人可以吗？
回答by dev
This confused me for a little while, but it turns out the arrow animation isn't actually in the plugins javascript. It's in the CSS using -webkit-transition: all .3s ease;. If you look at the default CSS file and go to line 52 you need to remove the above out of .flex-direction-nav a. So the line should look like the below.
这让我困惑了一段时间，但事实证明箭头动画实际上并不在插件 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;
}
回答by Scott Joudry
I recently ran into this issue and solved it (with the help of this question/answer) by overriding the following styles:
我最近遇到了这个问题并通过覆盖以下样式解决了它（在这个问题/答案的帮助下）：
.flex-direction-nav a {
...
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
with these styles in my own css:
在我自己的 css 中使用这些样式：
.flexslider .flex-direction-nav a.flex-prev,
.flexslider .flex-direction-nav a.flex-next {
...
-moz-transition: none;
-webkit-transition: none;
transition: none;
}
I'm a big fan of not modifying source code provided by a library, so I think this is a better and more complete solution.
我非常喜欢不修改库提供的源代码，所以我认为这是一个更好、更完整的解决方案。
回答by Huage.org
It is very simple, just change the following css code like this:
很简单，把下面的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 */
}回答by Mooseman
Make your own arrows: disable directionNavand use manualControls.
制作自己的箭头：禁用directionNav并使用manualControls.
