Pause event in carouFredsel

Question

I'm having trouble with a carousel. I want to add a pause or a stop event to a carousel. I already have built a slider, on the left side you have a navigation page for the sliders. The slider starts automatically, I want it to stop if I choose a slide manually

Here's my code:

Thanks for any hints.

  jQuery(this).parent().find('.navigation>ul>li').eq(0).addClass('active').end().each(function(){
                    jQuery(this).on('click', function(){
                        jQuery(this).parents('.csc-slider').find('.pager>a').eq(jQuery(this).index()).trigger('click');
                        return false;
                    });
                });
                var swidth = jQuery(this).width(); 
                jQuery(this).find('img')
                            .width(swidth +'px !important')
                            .eq(0)
                            .imagesLoaded()
                            .done(function($images){
                    jQuery($images).parents('.slideshow')
                                   .find('.item')
                                   .css({display:'block', float:'left'})
                                   .end()
                                   .carouFredSel({
                        width: "100%",
                        height: "variable",
                        items: {
                            visible: 1,
                            height: "auto"
                        },
                        scroll: {
                        fx          : "crossfade",
                        duration    : 5000,
                                    onAfter:function(data) {
                                    var p = jQuery(this).parents('.csc-slider');
                                    var i = p.find('.pager>a.selected').index();
                                    p.find('li.active').removeClass('active');
                                    p.find('.navigation>ul>li').eq(i).addClass('active');
                                }},
                        auto: {
                                pauseOnHover: "resume",
                                pauseOnEvent: true,
                                timeoutDuration: 5000,

                        },
                        prev: {
                            button: jQuery($images).parents('.csc-slider').find('.prev'),
                        },
                        next: {
                            button: jQuery($images).parents('.csc-slider').find('.next'),
                        },
                        pagination: jQuery($images).parents('.csc-slider').find('.pager'),

                    });

Answer 1

You can add a click event to navigation buttons to stop the auto scrolling:

$(".slider-pages .prev, .slider-pages .next, .slider-nav a").click(function(){
        carouFredselObject.trigger("configuration", {auto: false});
});