web-dev-qa-db-ja.com

フレックススライダーの矢印が正しく表示されない

私はしばらくの間この問題に悩まされており、答えを見つけることができないようなので、私はまっすぐに尋ねることにしました。

Flexsliderプラグインを使用してサイトに複数の画像を表示していますが、画像にカーソルを合わせると表示される矢印ナビゲーションがオフになっています。矢印は上部で切り取られており、その下にある完全に非表示になっているはずのテキストの一部が表示されています。これは問題のスクリーンショットです：

enter image description here

CSSをいじってみましたが、理解できません。誰か私を助けてくれませんか？

jquerycsspluginsnavigation
20
thosetinydreams

overflow: hidden;を.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; 
}

「前へ」と「次へ」のデフォルトで表示されるテキストを変更または削除する必要がある場合は、プラグインのオプションドキュメント「Tailor to Your Needs」を参照してください： http：//www.woothemes。 com/flexslider /

その後、次の設定を更新します。

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

line-heightを追加して解決することもできます。

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

PS：Flexsliderのバグのようで、デフォルト設定では適切に機能しないようです。

26
And390

Flexslider CSSの "flexslider-icon"のフォントサイズを変更して（flexslider.cssの70行目付近）、なんとか機能させることができました。

デフォルトでは40pxに設定されているようですが、30pxに変更すると、私が構築している2つのWebサイトで完全に機能します。

0
JWPersh

フォントである矢印は、コンテナには大きすぎます。

このCSSを追加するだけで、フォントのサイズが小さくなり、切り捨ての問題が修正されます。

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

これをCSSに追加すると、flexsliderのデフォルト設定が上書きされます

0
Mr Digital

追加するだけ

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

これはデフォルトのCSSを上書きします

0
Chris Happy

「jquery.flexslider.js」ファイルを開いて、1125行目で"// Primary Controls"を検索します。あなたが見つけるでしょう、

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

ここでは、次のテキストと前のテキストを削除して、もう一度保存する必要があります。

これがお役に立てば幸いです。

0
Tauphik Ahamad