function mycarousel_initCallback(carousel) { jQuery('#next_btn').bind('click', function() { carousel.next(); return false; }); jQuery('#prev_btn').bind('click', function() { carousel.prev(); return false; }); jQuery('#play_btn').bind('click', function() { document.getElementById("play_btn").style.display = "none"; document.getElementById("pause_btn").style.display = "inline"; carousel.startAuto(2); return false; }); jQuery('#pause_btn').bind('click', function() { document.getElementById("play_btn").style.display = "inline"; document.getElementById("pause_btn").style.display = "none"; carousel.startAuto(0); return false; }); // Disable autoscrolling if the user clicks the prev or next button. carousel.buttonNext.bind('click', function() { carousel.startAuto(0); }); carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); }); // Pause autoscrolling if the user moves with the cursor over the clip. carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); }; function mycarousel_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) { // No animation on first load of the carousel if (state == 'init') return; display(idx); }; function mycarousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) { display(idx); }; function mycarousel_itemVisibleOutCallbackBeforeAnimation(carousel, item, idx, state) {}; function mycarousel_itemVisibleOutCallbackAfterAnimation(carousel, item, idx, state) {}; function display(current_item) { document.getElementById("featured_number").innerHTML = current_item + '/' + '5'; } jQuery(document).ready(function() { jQuery('#featured_posts').jcarousel({ auto: 3, scroll: 1, wrap: 'last', initCallback: mycarousel_initCallback, itemVisibleInCallback: { onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation, onAfterAnimation: mycarousel_itemVisibleInCallbackAfterAnimation } }); });