jCarousel ajax 在下一个按钮上加载

Question

我正在使用 jcarousel 从单独滑块中的多个词加载搜索结果。
当我点击下一步按钮时，6 个元素被添加到我的滑块，但滑块不会滚动，直到再次点击。
问题出在哪里？

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

已解决

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'
        });
    });

};

jCarousel ajax 在下一个按钮上加载

jCarousel ajax load on next button

javascript

ajax

jquery

jcarousel