Adding a Pause Button to jCarousel (slight fix)

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.

3 Comments

  1. 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”

  2. Do you have any live demo for play pause icon with jcarousel?

    can you help me please. Above code is not working for me

Comments are closed.