Title

Saturday, 7 February 2015

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


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

Flexslider adds a class of 'flex-disabled' to the corresponding navigation elements upon reaching the beginning or end of the slideshow/carousel.

Looks like this only works if you set this parameter: animationLoop: false.

You can use this class to hide the 'prev' arrow (or 'next' arrow).

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

Optionally, you could set the opacity along with a CSS transition to have it fade in/out.

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

No comments:

Post a Comment