Hide arrows at both ends of a slide show with jCarousel Lite

Question

I am using jCarousel Lite and the documentation can be found here: http://www.gmarwaha.com/jquery/jcarousellite/

I have a carousel that can be moved using the arrows at both ends.

I want to change the carousel so that at the beginning of the state, before the user clicks to scroll through the slide show, the left arrow is missing. The idea is reasonable - do not provide the user with a button that does nothing, since the carousel is not round, and making it as such is not an option that they want. Similarly, they would prefer it so that the right arrow disappears at the end of the carousel, indicating that the user can only move in the opposite direction.

Summarizing:

• The initial carousel start state has only a right arrow, indicating to the user that the scroll should only move in one direction.

• Middle carousel, both arrows must be present so that the user can scroll in any direction.

• If there are no more scrolling elements at the end of the carousel, the right arrow should be visible, and the left arrow should not indicate to the user that they can only go back as they went through the carousel.

Edit [10/14/2010]: It turned out that the documentation on the JCarousel Lite web page does not include a mention of this function, but the original documentation of the jCarousel plugin. This feature does not seem to have been removed; I assumed that the plugin was a split version that would be explicitly defined in the documentation.

TL DR : like jCarousel, jCarousel Lite will do this automatically for you.

Answer 1

This is a very simple fix:

• Add the "disabled" class to your prev img:

   <img class="prev disabled" src="images/projects-prev.png" /> 

• Add this CSS bit:

   img.disabled { visibility: hidden; } 

The carousel script manages the disabled class after activation.

Answer 2

You need to do this:

 $(".projects-slideshow").jCarouselLite({ btnNext: "#projects .next", btnPrev: "#projects .prev", visible: 4, circular: 0, beforeStart: function() { $("#projects .prev").hide(); //$(this.btnPrev).hide(); may work and is neater }, afterEnd: function() { $("#projects .next").hide(); } }); 

Answer 3

.jcarousel-prev, .jcarousel-next {visibility: hidden; }