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

Question

I'm playing around with the CSS and Javascript for Flexslider 2 and I can't figure out how to hide the "prev" arrow for only the initial slide of my slide show. I would like it to then reappear for the remainder of the slideshow.

Any help is sincerely appreciated.

Case

Answer 1

I love the flexslider because you can write custom jquery logic within it's callback functions. Here is a basic example of hiding the arrows by default, then on click (a jquery method), reveal them again, all within the flexslider start() callback function...

$('#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

That will go along with the following 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>

Good luck!