Flexslider arrows not displayed properly

问题:

I've been stuck with this problem for some time, and can't seem to find an answer, so I decided to ask straight.

I am using the Flexslider plugin to display multiple images on a site, however, the arrows navigation that displays when hovering the image is off. The arrow is cut off at the top, and the text underneath it that is supposed to be completely hidden is partly showing. Here is a screen shot of the problem:

I tried tinkering with the CSS, but I just can't figure it out. Could anyone please help me?

回答1:

Remove overflow: hidden; from .flex-direction-nav a:

.flex-direction-nav a  { 
    display: block; 
    width: 40px; 
    height: 40px; 
    margin: -20px 0 0; 
    position: absolute; 
    top: 50%; z-index: 10; 
    overflow: hidden; /* Remove this line */
    opacity: 0; 
    cursor: pointer; 
    color: rgba(0,0,0,0.8); 
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3); 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    transition: all .3s ease; 
}

If you need to alter or remove the text that shows up by default for 'Previous' and 'Next', consult the options documentation 'Tailor to Your Needs' for the plugin here: http://www.woothemes.com/flexslider/

Following that, just update the settings for:

prevText: "Previous",    //String: Set the text for the "previous" directionNav item
nextText: "Next",        //String: Set the text for the "next" directionNav item

回答2:

You can also add line-height to solve it:

.flex-direction-nav a  {
    line-height: 40px;
}

PS: It seems like a Flexslider bug, that it does not work properly with default settings.

回答3:

I managed to get it working by changing the font size of "flexslider-icon" in the flexslider CSS (around line 70 in flexslider.css).

It seems to be set to 40px at default, but changing it to 30px has worked perfectly on two websites I'm building.

回答4:

Open your "jquery.flexslider.js" file and search "// Primary Controls" at line 1125 (approximately). You'd find,

// Primary Controls
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next", 

Here, you need to remove the next and prev text, and save it again.

Hope this will help.

回答5:

Just add

.flex-direction-nav li a{
      height:50px; 
}

This overrides the default css

回答6:

The arrow, which is a font, is too large for its container.

Just add this CSS, it will reduce the size of the font, and in turn, fix the cut off issue.

.flex-direction-nav a:before {
    font-family: "flexslider-icon";
    font-size: 35px;
    display: inline-block;
    content: '\F001';
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

Add this into your CSS and it will override the default settings for flexslider