Скрытие стрелок на любом конце слайд-шоу с помощью jCarousel Lite

Question

Я использую jCarousel Lite, и документацию можно найти здесь: http://www.gmarwaha.com/jquery/jcarousellite/

У меня есть карусель, по которой можно перемещаться с помощью стрелок на обоих концах.

Я хочу изменить карусель так, чтобы в начальном состоянии, прежде чем пользователь щелкнул по прокрутке слайд-шоу, стрелка влево не присутствовала. Идея разумная - не предоставляйте пользователю кнопку, которая ничего не делает, поскольку карусель не круглая, и ее создание как таковое не является вариантом, который он хочет. Кроме того, они предпочли бы, чтобы в конце карусели стрелка вправо исчезала, указывая, что пользователь может двигаться только в противоположном направлении.

Подведем итог:

1. В начальном начальном состоянии карусели видна только стрелка вправо, указывающая пользователю, что прокрутка должна идти только в одном направлении.

2. Средняя карусель, обе стрелки должны присутствовать, чтобы пользователь мог прокручивать в любом направлении.

3. Когда в конце карусели больше нет элементов для прокрутки, стрелка вправо должна быть видна, а стрелка влево не должна указывать пользователю, что они могут двигаться назад только так, как они прошли через карусельный.

Редактировать [14.10.2010]: Оказывается, что документация на веб-странице JCarousel Lite не включает упоминание об этой функции, в отличие от оригинальной документации по плагину jCarousel. Кажется, эта особенность не была чем-то лишена; Я предположил, потому что плагин был урезанной версией, что функции будут явно определены в документации.

TL; DR : Как и jCarousel, jCarousel Lite сделает это автоматически для вас.

Answer 1

Это очень простое исправление:

1. Добавьте «отключенный» класс к вашему prev img:

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

2. Добавьте этот бит CSS:

   img.disabled { visibility: hidden; }
   

Сценарий карусели управляет отключенным классом после активации.

Answer 2

Вам нужно сделать это:

$(".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 { видимость: скрытый; }