On page multiple slider. Multiple click on navigation then scroll.

[rvpatel]

First main slider work fine. other is not.

(function($) { $(function() { var jcarousel = $('.jcarousel'); jcarousel.on('jcarousel:reload jcarousel:create', function () { var width = jcarousel.innerWidth(); if (width >= 600) { width = width / 1; } else if (width >= 350) { width = width / 2; }

            jcarousel.jcarousel('items').css('width', width + 'px');
        })
        .jcarousel({
            wrap: 'circular',
        });

    $('.jcarousel-control-prev').jcarouselControl({
            target: '-=1'
    });

    $('.jcarousel-control-next').jcarouselControl({
            target: '+=1'
    });

        var jcarousel1 = $('.jcarousel1');
            jcarousel1.on('jcarousel:reload jcarousel:create', function () {
            var width = jcarousel1.innerWidth();
            if (width >= 600) {
                width = width / 2;
            } else if (width >= 350) {
                width = width / 2;
            }
            jcarousel1.jcarousel('items').css('width', width + 'px');
        })
        .jcarousel({
            wrap: 'circular',
        });

        $('.jcarousel-control-prev-1').jcarouselControl({
            target: '-=1',
            carousel: jcarousel1
        });

        $('.jcarousel-control-next-1').jcarouselControl({
            target: '+=1',
            carousel: jcarousel1
        });

        var jcarousel2 = $('.jcarousel2');
            jcarousel2.on('jcarousel:reload jcarousel:create', function () {
            var width = jcarousel2.innerWidth();
            if (width >= 600) {
                width = width / 2;
            } else if (width >= 350) {
                width = width / 2;
            }
            jcarousel2.jcarousel('items').css('width', width + 'px');
        })
        .jcarousel({
            wrap: 'circular',
        });    

        $('.jcarousel-control-prev-2').jcarouselControl({
            target: '-=1',
            carousel: jcarousel2
        });

        $('.jcarousel-control-next-2').jcarouselControl({
            target: '+=1',
            carousel: jcarousel2
        });    

    /**/    
       var jcarousel3 = $('.jcarousel3');
            jcarousel3.on('jcarousel:reload jcarousel:create', function () {
            var width = jcarousel3.innerWidth();
            if (width >= 600) {
                width = width / 2;
            } else if (width >= 350) {
                width = width / 2;
            }

            jcarousel3.jcarousel('items').css('width', width + 'px');
        })
        .jcarousel({
            wrap: 'circular',
        });      

        $('.jcarousel-control-prev-3').jcarouselControl({
                target: '-=1',
                carousel: jcarousel3
        });

        $('.jcarousel-control-next-3').jcarouselControl({
                target: '+=1',
                carousel: jcarousel3
        });

});

})(jQuery);

[rvpatel]

This is working now very well some css issue fixed.