javascript - 带分页点的 JQuery jCarousel？

Question

我正在使用 jCarousel 插件来显示一系列项目。我在关注 this example从网站获取外部控件和分页控件。

这种方法有两个问题:

1. 我需要手动为数字添加项目(而不是仅仅使用 JS 计算轮播中的项目数)，尽管我可以接受，并且

2. 似乎无法突出显示(通过类更改)当前幻灯片的项目

我正在做的是使用项目符号作为分页点，如您所见in this fiddle

<div class="carousel-nav cf">
<table>
<tr>
    <td><a href="#" id="mycarousel-prev">&#x25C0;</a></td>
    <td>
        <div class="jcarousel-control">
          <a href="#">&bull;</a>
          <a href="#">&bull;</a>
          <a href="#">&bull;</a>
        </div>
    </td>
    <td><a href="#" id="mycarousel-next">&#x25BA;</a></td>
</tr>
</table>
</div>

并希望将当前项目的类别设置为“事件”或类似。

有什么想法吗？或者有更好的插件吗？我试过 Cycle，但我需要两个同时显示 2 个或更多项目。谢谢。

Answer 1

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'});