Hiding arrows at either end of the slideshow using jCarousel Lite

Question

Hello all,

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 navigated using the arrows on either end.

I want to modify the carousel so that at the beginning state before the user clicks to scroll the slideshow, the left arrow is not present. The idea is a sensible one - don't provide the user with a button that does nothing, since the carousel is not circular and making it as such is not an option that they want. Likewise, they would prefer it so that at the end of the carousel, the right arrow disappears indicating that the user can only proceed in the opposite direction.

To summarize:

1. Initial start state of carousel only has the right arrow visible indicating to the user that the scroll must only proceed in one direction.

2. Mid-carousel, both arrows must be present so that the user is able to scroll in either direction.

3. When at the end of the carousel with no more items to scroll through, the right arrow must be visible and the left arrow must not, indicating to the user that they can only proceed back the way they came through the carousel.

Edit [10/14/2010]: It turns out that the documentation on the JCarousel Lite webpage does not include mention of this feature while the original jCarousel plugin documentation does. It seems this feature was not something stripped out; I assumed because the plugin was a stripped version that the features would be explicitly defined in the documentation.

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

Answer 1

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 2

It appears to be a very simple fix:

1. Add a "disabled" class to your prev img:

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

2. Add this bit of CSS:

   img.disabled { visibility: hidden; }
   

The carousel script manages the "disabled" class once activated.