Reset or Reload Jcarousel on tab change

Question

I have made two jcarousel sliders in two different tabs using jquery Ui...

When i change the tab section the slider has to reset (or) reload and moves to its first image.

I have used this script

jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel();
  jQuery('#mycarousel2').jcarousel();
  $( "#tabs" ).tabs();
});

I tried this script i didn't have any effect on code

<script type="text/javascript"> 
    var theModelCarousel = null; 

    function modelCarousel_initCallback(carousel) { 
        theModelCarousel = carousel; 

    }; 

    jQuery('#tabs-2').click(function() { 


         jQuery('#mycarousel').jcarousel({ 
            initCallback: modelCarousel_initCallback 

        });

    }); 

    function clearModelCarousel() { 
        theModelCarousel.reset(); 

    } 
</script> 

How can i reset the slider if i change to another tab (without refreshing the page).

Here i have made a BIN for easy understanding.

Answer 1

You would try with the reload options in jcarousel

.jcarousel('reload' [, options])

jCarousel API

$('.jcarousel').jcarousel('reload', {
    'animation': 'slow'
});