带分页点的JQuery jCarousel？

Question

我使用jCarousel插件来显示一系列项目。 我在网站上关注这个例子来获取外部控件和分页控件。

这种方法存在两个问题：

1. 我需要手动添加数字的项目（而不是仅用JS计算旋转木马中的项目数量），虽然我可以忍受这个，并且

2. 似乎没有办法突出（通过类更改）当前幻灯片的项目

我正在做的是使用子弹作为寻呼点，正如你在这个小提琴中看到的那样

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

Answer 2

实际上你可以使用回调函数来高亮显示当前活动的轮播元素

function highlighttab1(carousel, state, liindex) {
document.getElementById(liindex).className = "selected";}

function removehighlighttab1(carousel, state, liindex) {
document.getElementById(liindex).className = "unselected";}

几天前，我使用jcarousel，我有菜单标签面板（因为你有点）和所有静态超链接，点击时将滚动到用户轮播元素