Geek asks and answers

How to make nav direction constant on flexslider?

I want the little arrow to show the gray arrow, not the animation when you hover over the thumbnail. You can see the demo here . I made my way through javascript for the plugin and could not work for me where it animates the arrows. If I could, I would just comment on this code. So can anyone else?

+5
source share
4 answers

This confused me a bit, but it turned out that the arrow animation is not really in javascript plugins. This is in CSS using -webkit-transition: all .3s ease;. If you look at the default CSS file and go to line 52, you need to delete the above from .flex-direction-nav a. So the line should look like this.

.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;
}
+10
source

I recently ran into this problem and solved it (with the help of this question / answer), 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:

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

I am a big fan of not modifying the source code provided by the library, so I think this is a better and more complete solution.

+2
source

: directionNav manualControls.

0

, 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 */
}
Hide result
0

More articles:


All Articles