CODEWITHSUNDEEP
jqueryconfigurationcaroufredsel
toxalot
toxalot

Reputation: 11820

How do I get carouFredSel to play again after pause immediate (custom events)?

I'm testing different configurations trying to create the desired experience. I'm using a continuous scroll configuration and pausing it at page load. Then I have previous and next buttons. I have the buttons working on hover. So hover over scrolls it in that direction, and hover off pauses it.

The problem is when I change it to pause immediately. It doesn't play again next time I hover over.

Here's an excerpt from the code where it works, but is not immediate:

.find('.prev').hover(function() {
    $(this).parent().find('ul')
        .trigger('configuration', ['direction', 'right'])
        .trigger('play');
}, function() {
    $(this).parent().find('ul').trigger('pause');
})

And here is the code for the immediate pause:

.find('.prev').hover(function() {
    $(this).parent().find('ul')
        .trigger('configuration', ['direction', 'right'])
        .trigger('play');
}, function() {
    $(this).parent().find('ul').trigger('pause', true); //immediate pause
})

I've tried many different parameter combinations for both play and pause, but nothing gets the desired result - pause/resume immediately. It plays the first time, but then never again.

Here's a jsFiddle with full code example.

What am I missing?

Upvotes: 3

Views: 2099

Answers (1)

toxalot
toxalot

Reputation: 11820

To play again after an immediate pause, trigger the resume event instead of the play event.

.trigger('resume')

Note that it will finish its transition when it resumes. It has to finish the transition at some point. Depending on other settings, this may or may not be noticeable.

To finish the transition immediately, trigger the finish event.

.trigger('finish')

Depending on other settings, this may make it look a bit "glitchy", but at least it doesn't give the impression that the buttons aren't working.

Check out this jsFiddle for two variations of continuous scroll. One pauses immediately and then resumes on hover. The other finishes immediately and then speeds up on hover.

Upvotes: 3

Related Questions