如何使方向导航恒定在柔性滑块上

How to make the direction nav constant on flexslider?

本文关键字：何使 方向 导航      更新时间：2023-09-26

我希望小悬停灰色箭头是显示块，而不是动画悬停在缩略图导航。你可以在这里看到演示。我一直在费力地通过javascript插件，不能为我的生活工作，它是动画箭头。如果可以，我就把这段代码注释掉。那么其他人能吗?

这让我困惑了一会儿，但事实证明箭头动画实际上并不在插件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;
}

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

.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;
}

我是一个不修改库提供的源代码的大粉丝，所以我认为这是一个更好更完整的解决方案。

这很简单，只需像这样更改以下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 */
}

制作自己的箭头:禁用directionNav，使用manualControls

相关文章：