jCarousel ajax загружается при следующей кнопке

Я использую 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');
            }
        });

    });

javascript jquery ajax jcarousel
person speedy    schedule 10.04.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Решено

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

};
person speedy    schedule 11.04.2015