How to jump between frames in jCarousel immediately while in Autoscroll mode

115 Views Asked by At

I am using Sorgalla's jCarousel.

I want the carousel to move steadily without interruption, so I initialized the jCarousel like:

$('.jcarousel').jcarousel({
    wrap: 'circular',
    animation: {
        duration: 5000,
        easing:   'linear',
    }
})
.jcarouselAutoscroll({
    target: '+=1',
    interval: '0',
    autostart: true,
});

I also have a pagination implemented:

    $('.jcarousel-pagination')
        .on('jcarouselpagination:active', 'a', function() {
            $(this).addClass('active');
        })
        .on('jcarouselpagination:inactive', 'a', function() {
            $(this).removeClass('active');
        })
        .jcarouselPagination();

That works so far, the carousel is moving slowly at every moment. But now the pagination buttons do not work anymore since the carousel is constantly inside a transition.

What do I have to do in order to directly jump to the desired frame (with/without transition) when clicking one of the pagination items?

JSFiddle see here

1

There are 1 best solutions below

1
Greg On

The problem is :

You can't use pagination when carousel do a transition. For example : here http://jsfiddle.net/2Kspn/18/ Try to click pagination when there is a transition. Pagination doesn't works.

or in your JsFiddle, put autostart at False, and try to click on transition. Its doesn't works.

So, I see somes solutions :

  1. You can put a internal (at 1000 for example) in order to let pagination works between this interval. see here http://jsfiddle.net/2Kspn/15/

  2. try to stop current transition, and force pagination. But in API, http://sorgalla.com/jcarousel/docs/reference/api.html#api, we don't find a function like that. So we can add function. on event $('a').click(). I can stop transition like that :

    $('.jcarousel ul').stop();

But we must do re-active transition.

so I do that :

$('.jcarousel ul').stop( true, true);

see here http://jsfiddle.net/sg9u5fLy/5/

But its not really what we want.

But maybe the good way ?

Hope that helps