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

创建一个带有一些 id（例如 #count）的 div，并将其放置在页面上您想要的任何位置。然后在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 包含您在插件的 visible 属性中定义的可见图像的数量。 我不知道为什么这个插件在图像列表的开头和末尾复制图像等于为插件的可见属性指定的值。因此你需要做这样的事情

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

请注意，当您在最后一张图像上并单击下一个按钮时会出现错误，当您在第一张图像上并单击上一个按钮时会出现同样的问题，您需要自己修复；）

Answer 2

我不认为插件支持该选项开箱即用。至少不是根据文档。

但是你为什么不把<div>元素放在滑块容器的某个地方（或者包装它，如果它与滑块混淆），定位它absolute。

您可以利用两个回调，beforeStart 和 afterEnd，您可以使用它们来增加/减少计数器内的值。

祝你好运！