jCarousel ajax load on next button

Question

I'm using jcarousel for loading search results from multiple words in separate sliders.
When i click on the next button 6 elements are added to my slider, but the slider doesn't scroll until another click is made.
Where is the problem ?

var runSearchCarousel = function(){
        var carousel = jQuery('.row-wrap').jcarousel({vertical: false, animation: 'fast', visible: 4, wrap: 'last'});
        return carousel;
    };

var searchCarouselMore = function(){

    jQuery('.search-row').on('click', '.next-b', function(){

        var $this = jQuery(this),
        id = $this.attr('id').substring('rightArrow-'.length),
        container = jQuery('#slider_' + id),
        containerPosition = container.parent().parent().find('#rowPosition-' + id).val(),
        lastLi = container.find('li.gridWrap').filter(':last'),
        carousel = container.parent(),
        lastSku = lastLi.attr('id').substring('product-'.length);

        $this.jcarouselControl({
            carousel : carousel,
            target : '+=4'
        });


        jQuery.ajax({
            type: 'get',
            url : '/ajax/_fetchMultiSearch.php',
            data: {
                toFetch: 6,
                containerPosition: containerPosition,
                lastSku: lastSku
            },
            cache: false,
            success: function(response){
                container.append(response);
                uiResize();
                carousel.jcarousel('reload');
            }
        });

    });

Answer 1

Solved

var runSearchCarousel = function(){
    var carousel = jQuery('.row-wrap').jcarousel({vertical: false, animation: 'slow', visible: 4});
    return carousel;
};

var searchCarouselMore = function(){
    jQuery(".prev-b").on("jcarouselcontrol:active", function() {
        jQuery(this).removeClass("inactive")
    }).on("jcarouselcontrol:inactive", function() {
        jQuery(this).addClass("inactive")
    }).jcarouselControl({
        target: "-=1"
    });

    jQuery(".next-b").on("jcarouselcontrol:active", function() {
        jQuery(this).removeClass("inactive")
    }).on("jcarouselcontrol:inactive", function() {
        jQuery(this).addClass("inactive")
    }).jcarouselControl({
        target: "+=1"
    }); 

    jQuery('.search-row').on('click', '.next-b', function(){

        var $this = jQuery(this),
        id = $this.attr('id').substring('rightArrow-'.length),
        container = jQuery('#slider_' + id),
        containerPosition = container.parent().parent().find('#rowPosition-' + id).val(),
        lastLi = container.find('li.gridWrap').filter(':last'),
        carousel = container.parent(),
        lastSku = lastLi.attr('id').substring('product-'.length);

        $this.jcarouselControl({
            carousel : carousel,
            target : '+=4'
        });


        jQuery.ajax({
            type: 'get',
            url : '/ajax/_fetchMultiSearch.php',
            data: {
                toFetch: 6,
                containerPosition: containerPosition,
                lastSku: lastSku
            },
            cache: false,
            success: function(response){
                container.append(response);
                uiResize();
                carousel.jcarousel('reload');
            }
        });

    });

    jQuery('.search-row').on('click', '.prev-b', function(){

        var $this = jQuery(this),
        id = $this.attr('id').substring('leftArrow-'.length),
        container = jQuery('#slider_' + id),
        carousel = container.parent();

        jQuery(this).jcarouselControl({
            carousel : carousel,
            target : '-=4'
        });
    });

};