flexsliderで方向ナビを一定にする方法は？

Question

小さなホバーの灰色の矢印を表示ブロックにして、サムネイルナビゲーション上にマウスを置いたときにアニメートしないようにします。あなたはデモhereを見ることができます。私はプラグインのためのjavascriptを渡って来て、私の人生のために矢印をアニメーション化している場所で動作することはできません。できれば、そのコードをコメントアウトします。それで誰もできますか？

Answer 1

これは私を少し混乱させましたが、矢印アニメーションは実際にはプラグインのJavaScriptにはありません。 CSSには-webkit-transition: all .3s ease;を使っています。デフォルトのCSSファイルを見て52行目に行く場合は、上記のファイルを.flex-direction-nav aから削除する必要があります。だから、ラインは以下のようになります。

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

Answer 2

矢印を作成する：directionNavを無効にし、manualControlsを使用します。

Answer 3

私は最近、この問題に遭遇して、次のスタイルをオーバーライドすることで（この質問/答えの助けを借りて）、それを解く：私自身のCSSのこれらのスタイルを持つ

.flex-direction-nav a { 
    ... 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    transition: all .3s ease; 
} 

：

を

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

私はライブラリで提供されているソースコードを変更しないようにするのが大好きなので、これはもっと良い、より完全なソリューションだと思います。

Answer 4

それはちょうどこのような次の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 */ 
 
}