Question

我无法找到合适的答案，但我相信有人必须在此之前做到这一点。

我正在使用JCarouselLite，我想实现一个看起来像＆＃34; 1/20＆＃34;例如，但我找不到任何解决方案。

这是我的HTML

＆＃13;

<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>

＆＃13;

我的旋转木马的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>元素放在滑块容器中的某个位置（或者将其包裹起来，如果它与滑块一起向上移动），将它放置在absolute。

您可以利用两个回调函数beforeStart和afterEnd，您可以使用这些回调来递增/递减计数器内的值。

祝你好运！

Answer 2

创建一个带有一些id的div（例如#count）并放置在页面上的任何位置。然后在javascript中执行此操作

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

此处currentItems包含您在插件的visible属性中定义的可见图像的数量。我不知道为什么这个插件复制图像列表中的图像和图像列表末尾的图像等于为插件的可见属性指定的值。因此你需要做这样的事情

{{1}}

注意当您在最后一个图像上并且单击下一个按钮时出现错误，当您在第一个图像上并单击上一个按钮时，您需要自己修复它;）

jCarouselLite如何实现幻灯片计数器？

2 个答案: