pause carousel on click caroufredsel

Question

I have a carousel and a set of thumbs. The carousel is set to scroll automatically on page load. However, I would like to pause the carousel, when a thumbnail is clicked.

I am trying to achieve this on a click event of the thumbnail image, then use trigger to slideTo the clicked thumb, then pause.

The problem is, with the following code, it pauses the carousel, but does not change the carousel image to the clicked image. If I remove the pause trigger, the carousel changes to the clicked thumb.

<script>
$(function(){
      /* Attached an unique class name to each thumbnail image */
    $('#thumbs .thumb a').each(function(i) {
        $(this).addClass( 'itm'+i );

        /* add onclick event to thumbnail to make the main 
        carousel scroll to the right slide*/
        $(this).click(function() {
            $('#project-carousel').trigger( 'slideTo', [i, 0, true] );
            $('#project-carousel').trigger('pause', true);
            return false;
        });
    }); 

    /* Highlight the first item on first load */
    $('#thumbs a.itm0').addClass( 'selected' );

      //slideshow
 projectCarousel = $("#project-carousel").carouFredSel({
        responsive:true,
        circular:true,
        infinite:true,
        width:983,
        height:534,
        scroll:{
            fx:'crossfade',
            duration:1000,
            onBefore: function() {
                /* Everytime the main slideshow changes, it check to 
                    make sure thumbnail and page are displayed correctly */
                /* Get the current position */
                var pos = $(this).triggerHandler( 'currentPosition' );

                /* Reset and select the current thumbnail item */
                $('#thumbs a').removeClass( 'selected' );
                $('#thumbs a.itm'+pos).addClass( 'selected' );
                /* Move the thumbnail to the right page */
                //var page = Math.floor( pos / 8 );
                //$('#thumbs').trigger( 'slideToPage', page );
            }
        },
        auto: {
          play:true,
        },
        items:{
            height:winHeight,
            visible:1,
            width:1000
        },
        prev:$("#left"),
        next:$("#right"),
    });

   /* Carousel for the thumbnails */
    $('#thumbs').carouFredSel({
        width:680,
        height:50,
        direction: 'left',
        circular: false,
        items: 9,
        infinite: false,
        align: false,
        auto: false,
        prev: '#prev',
        next: '#next'
    });

});
</script>

How do I get the carousel to progress to the clicked thumbnail, THEN pause?

Answer 1

This may not be the best way, but this is what I have so far that stops the carousel after the thumbnail has changed:

I added a delay to the function:

$(this).click(function() {
            $('#project-carousel').trigger( 'slideTo', [i, 0, true] );
            setTimeout(function() {
                $('#project-carousel').trigger('pause', true);
            }, 1000);
            return false;
        });

This allows the transition to complete, then pauses the scroll.