How to add touch and swipe to my product slider

Question

I am trying to add touch & swipe feature to my product slider. How can I enable this feature? I'm also using jQuery UI Touch Punch and

http://cdnjs.com/libraries/jquery.caroufredsel

I find this after search on google but don't know where to put it

swipe: {
   onMouse: true,
   onTouch: true
  }

Here is my code

if( $.fn.carouFredSel ) {
        $('.products-slider-wrapper').each(function(){
            var t = $(this);
            $(this).imagesLoaded(function(){

                var items = t.find('.products-slider').data('items');

                if( $(this).parents('.border-box').length == 0) {

                    var carouFredSel;

                    var prev = t.find('.es-nav-prev').show();
                    var next = t.find('.es-nav-next').show();

                    carouFredSelOptions_defaults.prev = prev;
                    carouFredSelOptions_defaults.next = next;


                    if( $('body').outerWidth() <= 767 ) {
                        t.find('li').each(function(){
                            $(this).width( t.width() );
                        });

                        carouFredSelOptions_defaults.items = 1;
                    } else {
                        t.find('li').each(function(){
                            $(this).attr('style', '');
                        });

                        carouFredSelOptions_defaults.items = items;
                    }

                    carouFredSel = t.find('.products').carouFredSel( carouFredSelOptions_defaults );

                    if ( $('body').hasClass('responsive') ) {
                        $(window).resize(function(){

                            carouFredSel.trigger('destroy', false).attr('style','');

                            if( $('body').outerWidth() <= 767 ) {
                                t.find('li').each(function(){
                                    $(this).width( t.width() );
                                });

                                carouFredSelOptions_defaults.items = 1;
                            } else {
                                t.find('li').each(function(){
                                    $(this).attr('style', '');
                                });

                                carouFredSelOptions_defaults.items = items;
                            }

                            carouFredSel.carouFredSel(carouFredSelOptions_defaults);
                            $('.es-nav-prev, .es-nav-next').removeClass('hidden').show();
                        });
                    }

                    $(document).on('feature_tab_opened', function(){ $(window).trigger('resize') } );
                }
            });
        });
        $('.es-nav-prev, .es-nav-next').removeClass('hidden').show();
    }

Answer 1

You have to use a custom configuration.

You are probably only using this in your code:

$('#carousel').carouFredSel();

 Try this instead:

// Using custom configuration
$('#carousel').carouFredSel({
    swipe: {
        onMouse: true,
        onTouch: true
    }
});

Found on http://docs.dev7studios.com/jquery-plugins/caroufredsel