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
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