jCarouselLite Как я могу реализовать слайд-счетчик?

Question

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

Я использую JCarouselLite, и я хотел бы реализовать простой слайд-счетчик, который выглядит, например, «1/20», но я не могу найти для этого какое-либо решение.

Вот мой HTML

<div class="page-carousel">   
 
    <div class="carousel"> 
 
     <ul> 
 
      <li><img id="caption" src="img/img-01.jpg" alt="1"><h3>caption</h3></li> 
 
      <li><img id="caption" src="img/img-02.jpg" alt="2"><h3>caption 2</h3></li> 
 
      <li><img id="caption" src="img/img-03.jpg" alt="3"><h3>caption 3</h3></li> 
 
     </ul> 
 
    </div> 
 
</div>

И мои JS настройки для каруселью

$().ready(function() { $(".carousel").jCarouselLite({ visible: 2, auto: 2, scroll: 2, mouseWheel: true, timeout: 6000, speed: 800, swipe: true, circular: true, btnNext: ".next", btnPrev: ".prev", autoWidth: true, responsive: true }); });

Любая помощь будет очень высоко - я полностью застрял на вот этот.

Answer 1

Создайте div с некоторым id (например, #count) и разместите где захотите его на своей странице. Затем в JavaScript сделать это

$().ready(function() { 
    $(".carousel").jCarouselLite({ 
    visible: 2, 
    auto: 2, 
    scroll: 2, 
    mouseWheel: true, 
    timeout: 6000, 
    speed: 800, 
    swipe: true, 
    circular: true, 
    btnNext: ".next", 
    btnPrev: ".prev", 
    autoWidth: true, 
    responsive: true,  
    afterEnd: function(currentItems) { 
     var item1 = $(currentItems[0]).index()-1; 
     var item2 = $(currentItems[1]).index()-1; 
     var visible = 2; 
     var totalItem = $(".carousel").find("li").length - (visible * 2); 
     $("#count").html("Showing "+ item1 + " and " + item2 + " of " +totalItem); 
    } 
}); 

Здесь currentItems содержит количество видимого изображения, которое вы определяете в видимом свойстве плагина. Я не знаю, почему этот плагин дублирует изображения в начале и в конце списка изображений, равные значению, указанному для видимого свойства плагина. Поэтому вам нужно сделать что-то вроде этого

var visible = 2; 
var totalItem = $(".carousel").find("li").length - (visible * 2); 

Примечания есть ошибка, когда вы находитесь на последнее изображение и нажмите на следующую кнопку и то же самое, когда вы находитесь на первое изображение и нажмите кнопку предыдущей, вам нужно исправить это самостоятельно;)

Answer 2

Я не думаю, что плагин поддерживает эту опцию из коробки. По крайней мере, не в соответствии с документацией.

Но почему бы вам просто не положить элемент <div> где-нибудь в контейнере ползунка (или обернуть его, если он испортит st с помощью ползунка), расположите его absolute.

Это два обратных вызова, которые вы можете использовать, beforeStart и afterEnd, вы можете использовать их для увеличения/уменьшения значений внутри счетчика.

Удачи вам!