我正在使用 jCarousel 插件来显示一系列项目。我在关注 this example从网站获取外部控件和分页控件。
这种方法有两个问题:
我需要手动为数字添加项目(而不是仅仅使用 JS 计算轮播中的项目数),尽管我可以接受,并且
似乎无法突出显示(通过类更改)当前幻灯片的项目
我正在做的是使用项目符号作为分页点,如您所见in this fiddle
<div class="carousel-nav cf">
<table>
<tr>
<td><a href="#" id="mycarousel-prev">◀</a></td>
<td>
<div class="jcarousel-control">
<a href="#">•</a>
<a href="#">•</a>
<a href="#">•</a>
</div>
</td>
<td><a href="#" id="mycarousel-next">►</a></td>
</tr>
</table>
</div>
并希望将当前项目的类别设置为“事件”或类似。
有什么想法吗?或者有更好的插件吗?我试过 Cycle,但我需要两个同时显示 2 个或更多项目。谢谢。
最佳答案
html:
<ul class="jcarousel-control"></ul>
脚本:
$('.jcarousel-control')
.on('jcarouselpagination:active', 'li', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'li', function() {
$(this).removeClass('active');
})
.jcarouselPagination({
'perPage':1,
'item': function(page, carouselItems) {
return '<li class="' + (page == 1 ? "active" : "") + '"><a href="#' + page + '"></a></li>';
}
});
$('.mycarousel-prev').jcarouselControl({target:'-=1'});
$('.mycarousel-next').jcarouselControl({target:'+=1'});
关于javascript - 带分页点的 JQuery jCarousel?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13535144/