How to make the direction nav constant on flexslider?

Question

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?

Rhaetian

Answer 1

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.

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

Roadstead

For this to work in my situation, I also had to remove opacity:0 – Capful

If you don't want to change the main css files add the following to your own css files .flexslider .flex-next {opacity: 0.8; right: 5px;} .flexslider .flex-prev {opacity: 0.8; left: 5px;} – Mortenson

For mine, I had to also override the position and make it initial instead of absolute. – Edirne

It looks like the only thing you have to override is a.flex-disabled which is how the transitions and opacity are triggered. Give a.flex-disabled{ display: block; opacity: 1 !important; } – Necrophobia

Answer 2

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:

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

Biforate

Answer 3

It is very simple, just change the following css code like this:

.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 */
}

Silk

Answer 4

Make your own arrows: disable directionNav and use manualControls.

Pita

I don't think this would do it. I just need something that will stop those arrows animating in. Can't see form the JS what makes them do it. – Rhaetian

Disabling directionNav would stop the arrows from appearing at all. – Pita