CODEWITHSUNDEEP
javascriptjquerypluginsflexslider
Claire
Claire

Reputation: 3773

How to make the direction nav constant on flexslider?

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?

Upvotes: 6

Views: 20001

Answers (4)

XYZABC
XYZABC

Reputation: 165

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

Upvotes: 1

Scott Joudry
Scott Joudry

Reputation: 902

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.

Upvotes: 2

dev
dev

Reputation: 4009

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

Upvotes: 10

Mooseman
Mooseman

Reputation: 18891

Make your own arrows: disable directionNav and use manualControls.

Upvotes: 0

Related Questions