帶分頁點的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，我有菜單標簽面板（因為你有點）和所有靜態超鏈接，點擊時將滾動到用戶輪播元素