弹性 slider 2 : how do I hide the direction-nav "prev" arrow for my initial slide?

Question

我正在使用 Flexslider 2 的 CSS 和 Javascript，但我不知道如何只为幻灯片放映的初始幻灯片隐藏“上一个”箭头。我希望它在幻灯片的其余部分重新出现。

真诚地感谢任何帮助。

案件

Answer 1

我喜欢 flexslider，因为您可以在它的回调函数中编写自定义 jquery 逻辑。这是默认情况下隐藏箭头的基本示例，然后单击(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>

祝你好运!