JQuery jCarousel with paging dots?

Question

I was using jCarousel plugin to display a series of items. I was following this example from the web site to get external controls and a paging control.

There's two problems with this approach:

i need to add the items for the numbers manually (instead of just calculating the number of items in the carousel with JS), although I can live with this, and
There seems to be no way to highlight (via a class change) the item for the current slide

What I am doing is using bullets as paging dots, as you can see 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>

and would like to set the class to "active" or similar for the current item.

Any ideas? Or is there a better plugin for this? I tried Cycle but I need two have 2 or more items showing at once. Thanks.

As far as I know this is implemented on 0.3 version of jcarousel with it's pagination plugin: http://sorgalla.com/jcarousel/docs/plugins/pagination/ If you use it it will automatically give a class to the current active bullet — Elaine Marley, Nov 26 '12 at 11:22
Where's the beta download? I don't see a link on the docs pages or on the main jCarousel page. — Steve, Nov 27 '12 at 01:20

score 2 · Answer 1 · edited Oct 14 '14 at 13:12

html:

<ul class="jcarousel-control"></ul>

script:

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

score -1 · Answer 2 · edited Oct 14 '14 at 13:01

actually you can use call back function for higlighting respective to current active carousel element

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

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

few days ago i worked with jcarousel where i had menu label panel (as you have dots) and all static hyperlinks which when clicked will scroll to the intendent carousel element

JQuery jCarousel with paging dots?

2 Answers2