flexslider - Flexslider 2：最初のスライドの方向ナビゲーションの「前の」矢印を非表示にするにはどうすればよいですか？

Question

Flexslider 2のCSSとJavascriptをいじっていますが、スライドショーの最初のスライドだけで「前の」矢印を非表示にする方法がわかりません。その後、スライドショーの残りの部分でそれを再表示したいと思います。

どんな助けでも心から感謝します。

場合

Answer 1

コールバック関数内にカスタム jquery ロジックを記述できるので、flexslider が大好きです。これは、デフォルトで矢印を非表示にし、クリックすると（jqueryメソッド）、すべてflexslider start（）コールバック関数内で再び表示する基本的な例です...

$('#carousel-home').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 170,
    itemMargin: 5,
    asNavFor: '#slider',
    start:function(slider){
        //HIDE THE ARROWS BY DEFAULT...
        $('#slider .flex-direction-nav').css({visibility:'hidden'});

        //THEN INSERT YOUR CUSTOM JQUERY CLICK ACTIONS TO REVEAL THEM AGAIN
        slider.find('a').on('click',function(){
        $('#slider .flex-direction-nav').css({visibility:'visible'});
        });
    }//end start function
});//end carousel

$('#slider').flexslider({
    slidshow: false,
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: true,
    sync: "#carousel-home"
});//end slider

それは次のHTMLと一緒になります...

<div id="carousel-home" class="flexslider">
  <ul class="slides ffastandards">
  <li><a href="#">Mission</a></li>
    <li><a href="#">Vision</a></li>
    <li><a href="#">Voice</a></li>
  </ul>
</div>
<hr>
<div id="slider" class="flexslider content-slider">
    <ul class="slides">
    <li>mission</li>
    <li>vision</li>
    <li>voice</li>
    </ul>
</div>

幸運を！

Answer 2

Flexslider は'flex-disabled'、スライドショー/カルーセルの最初または最後に到達すると、対応するナビゲーション要素に のクラスを追加します。

これは、次のパラメーターを設定した場合にのみ機能するようです: animationLoop: false.

このクラスを使用して、「前」矢印 (または「次」矢印) を非表示にすることができます。

.flex-direction-nav a.flex-disabled {
   display:none;
}

必要に応じて、CSS トランジションと共に不透明度を設定して、フェードイン/アウトさせることができます。

.flex-direction-nav a {
   opacity: 1;
   transition: opacity .3s;
   -moz-transition: opacity .3s;
   -webkit-transition: opacity .3s;
}

.flex-direction-nav a.flex-disabled {
   opacity: 0;
}

Answer 3

これはトリックを行います

.flex-direction-nav a.flex-next, 
.flex-direction-nav a.flex-prev{
    display:none;
}