I was recently asked by a client to add a pause button to the jCarousel-powered carousel on their site.
To do this, I used this post by Jeremy Mikola (thanks Jeremy). Here’s his code:
$(document).ready(function(){
$('#jcarousel').jcarousel({
vertical: true,
scroll: 1,
auto: 5,
initCallback: function(jc, state) {
if (state == 'init') {
// Insert a play/pause button between the prev/next buttons
$('div.jcarousel-prev-vertical').after('<div class="jcarousel-
toggle-vertical" style="display:block;"></div>');
/* Override the internal startAuto() method, which is called
after
* animations complete, to prevent next/prev buttons from
reactivating
* the timer while in the pause state.
*/
jc.startAutoOrig = jc.startAuto;
jc.startAuto = function() {
if (!jc.paused) {
jc.startAutoOrig();
}
}
jc.pause = function() {
$('div.jcarousel-toggle-vertical')
.removeClass('jcarousel-play-vertical')
.addClass('jcarousel-pause-vertical');
jc.paused = true;
jc.stopAuto();
};
jc.play = function() {
$('div.jcarousel-toggle-vertical')
.removeClass('jcarousel-pause-vertical')
.addClass('jcarousel-play-vertical');
jc.paused = false;
jc.startAuto();
};
// Click event for playback toggle button, conditionally calls
play/pause
$('div.jcarousel-toggle-vertical').click(function(){
if (this.timer === null) {
jc.play();
} else {
jc.pause();
}
});
}
jc.play();
}
});
});
However, I had a bit of trouble with it and had to make a change, as follows:
For some reason, "this.timer === null" wasn't working for me.
I replaced that section with:
jQuery('div.jcarousel-toggle').click(function(){
if (jc.paused) {
jc.play();
} else {
jc.pause();
}
});
Seemed logical and seems to work...
Hope that helps someone.
I did try to post this as a comment on Nabble, but it’s still pending, so I’m posting here for now.
Sir… This roxx… It’s flawless and saved the day.
If I may add:
aux = jc;
jc.pause()
setTimeout(“aux.play();”,3000);
Also works, inside a callback, if you don’t wanna use “click”
Sweet – thanks for the improvement 🙂
Do you have any live demo for play pause icon with jcarousel?
can you help me please. Above code is not working for me