Javascript 猫头鹰旋转木马插件-需要重复旋转木马

我正在使用添加一些旋转木马到我的网站

这个版本的OWLCarousel允许用户通过创建附加插件来扩展它的功能。我正在使用我发现的一个插件，使旋转木马显示在两行而不是一行。这在本文中得到了说明。我可以让它工作没有问题

我的问题是，我想创建其中两个旋转木马。当我创建第二个旋转木马时，虽然它不工作

以下是附加插件的代码：

;(function ($, window, document, undefined) {
    Owl2row = function (scope) {
    this.owl = scope;
    this.owl.options = $.extend(Owl2row.Defaults, this.owl.options);
    //link callback events with owl carousel here

    this.handlers = {
        'initialize.owl.carousel': $.proxy(function (e) {
            if (this.owl.settings.owl2row) {
                this.build2row(this);
            }
        }, this)
    };

    this.owl.$element.on(this.handlers);
};

Owl2row.Defaults = {
    owl2row: 'true',
    owl2rowTarget: 'item',
    owl2rowContainer: 'owl2row-item',
    owl2rowDirection: 'utd' // ltr
};

//mehtods:
Owl2row.prototype.build2row = function(thisScope){

    var carousel = $('.' + thisScope.owl.options.baseClass);
    var carouselItems = carousel.find('.' + thisScope.owl.options.owl2rowTarget);

    var aEvenElements = [];
    var aOddElements = [];

    $.each(carouselItems, function (index, item) {
        if ( index % 2 === 0 ) {
            aEvenElements.push(item);
        } else {
            aOddElements.push(item);
        }
    });

    carousel.empty();

    switch (thisScope.owl.options.owl2rowDirection) {
        case 'ltr':
            thisScope.leftToright(thisScope, carousel, carouselItems);
            break;

        default :
            thisScope.upTodown(thisScope, aEvenElements, aOddElements, carousel);
    }

};

Owl2row.prototype.leftToright = function(thisScope, carousel, carouselItems){

    var o2wContainerClass = thisScope.owl.options.owl2rowContainer;
    var owlMargin = thisScope.owl.options.margin;

    var carouselItemsLength = carouselItems.length;

    var firsArr = [];
    var secondArr = [];

    //console.log(carouselItemsLength);

    if (carouselItemsLength %2 === 1) {
        carouselItemsLength = ((carouselItemsLength - 1)/2) + 1;
    } else {
        carouselItemsLength = carouselItemsLength/2;
    }

    //console.log(carouselItemsLength);

    $.each(carouselItems, function (index, item) {


        if (index < carouselItemsLength) {
            firsArr.push(item);
        } else {
            secondArr.push(item);
        }
    });

    $.each(firsArr, function (index, item) {
        var rowContainer = $('<div class="' + o2wContainerClass + '"/>');

        var firstRowElement = firsArr[index];
            firstRowElement.style.marginBottom = owlMargin + 'px';

        rowContainer
            .append(firstRowElement)
            .append(secondArr[index]);

        carousel.append(rowContainer);
    });

};

Owl2row.prototype.upTodown = function(thisScope, aEvenElements, aOddElements, carousel){

    var o2wContainerClass = thisScope.owl.options.owl2rowContainer;
    var owlMargin = thisScope.owl.options.margin;

    $.each(aEvenElements, function (index, item) {

        var rowContainer = $('<div class="' + o2wContainerClass + '"/>');
        var evenElement = aEvenElements[index];

        evenElement.style.marginBottom = owlMargin + 'px';

        rowContainer
            .append(evenElement)
            .append(aOddElements[index]);

        carousel.append(rowContainer);
    });
};

/**
 * Destroys the plugin.
 */
Owl2row.prototype.destroy = function() {
    var handler, property;

    for (handler in this.handlers) {
        this.owl.dom.$el.off(handler, this.handlers[handler]);
    }
    for (property in Object.getOwnPropertyNames(this)) {
        typeof this[property] !== 'function' && (this[property] = null);
    }
};



 $.fn.owlCarousel.Constructor.Plugins['owl2row'] = Owl2row;
})( window.Zepto || window.jQuery, window,  document );

；（函数（$，窗口，文档，未定义）{
Owl2row=函数（范围）{
this.owl=范围；
this.owl.options=$.extend（Owl2row.Defaults，this.owl.options）；
//将回调事件链接到此处的owl转盘
此参数为0.1={
'initialize.owl.carousel'：$.proxy（函数（e）{
if（this.owl.settings.owl2row）{
this.build2row（this）；
}
}，本页）
};
this.owl.element.on（this.handlers）；
};
Owl2row.Defaults={
owl2row:“真的”，
owl2rowTarget:'item'，
owl2rowContainer:“owl2row项目”，
owl2rowDirection:'utd'//ltr
};
//方法：
Owl2row.prototype.build2row=函数（此范围）{
var carousel=$（'.'+thiscope.owl.options.baseClass）；
var carouselItems=carousel.find（'.'+thiscope.owl.options.owl2rowTarget）；
var aEvenElements=[]；
var AodElements=[]；
$。每个（旋转木马、功能（索引、项目）{
如果（索引%2==0）{
aEvenElements.push（项目）；
}否则{
AodElements.push（项目）；
}
});
carousel.empty（）；
开关（thisScope.owl.options.owl2rowDirection）{
案例“ltr”：
thisScope.leftToright（thisScope，旋转木马，旋转木马）；
打破
违约：
thisScope.upTodown（thisScope、aEvenElements、aOddElements、carousel）；
}
};
Owl2row.prototype.leftToright=函数（此作用域、旋转木马、旋转木马）{
var o2wContainerClass=thiscope.owl.options.owl2rowContainer；
var owlMargin=thiscope.owl.options.margin；
var carouselItemsLength=carouselItems.length；
var firsArr=[]；
var secondArr=[]；
//console.log（carouselItemsLength）；
如果（旋转木马长度%2==1）{
carouselItemsLength=（（carouselItemsLength-1）/2）+1；
}否则{
carouselItemsLength=carouselItemsLength/2；
}
//console.log（carouselItemsLength）；
$。每个（旋转木马、功能（索引、项目）{
if（索引

下面是我用来创建2个旋转木马的代码：

jQuery(function () {

    var owl = jQuery('#owl2row-plugin');
    owl.owlCarousel({
        loop: false,
        dots: false,
        margin: 10,
        nav: true,
        navText: ["<< Prev","Next >>"],
        owl2row: 'true', // enable plugin
        owl2rowTarget: 'item',    // class for items in carousel div
        owl2rowContainer: 'owl2row-item', // class for items container
        owl2rowDirection: 'utd', // ltr : directions
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 3
            }
        }
    });

     var owl2 = jQuery('#owl2row-plugin-2');
    owl2.owlCarousel({
        loop: false,
        dots: false,
        margin: 10,
        nav: true,
        navText: ["<< Prev","Next >>"],
        owl2row: 'true', // enable plugin
        owl2rowTarget: 'item',    // class for items in carousel div
        owl2rowContainer: 'owl2row-item-2', // class for items container
        owl2rowDirection: 'utd', // ltr : directions
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 3
            }
        }
    });


});

jQuery（函数（）{
var owl=jQuery（“#owl2row plugin”）；
猫头鹰旋转木马({
循环：false，
点：错，
差额：10，
导航：是的，
导航文本：[“>”]，
owl2row:'true'，//启用插件
owl2rowTarget:'item'，//carousel div中项目的类
owl2rowContainer:'owl2row item'，//items容器的类
owl2rowDirection:'utd'，//ltr:directions
响应：{
0: {
项目：1
},
600: {
项目：2
},
1000: {
项目：3
}
}
});
var owl2=jQuery（'#owl2row-plugin-2'）；
猫头鹰转盘({
循环：false，
点：错，
差额：10，
导航：是的，
导航文本：[“>”]，
owl2row:'true'，//启用插件
owl2rowTarget:'item'，//carousel div中项目的类
owl2rowContainer:'owl2row-item-2'，//items容器的类
owl2rowDirection:'utd'，//ltr:directions
响应：{
0: {
项目：1
},
600: {
项目：2
},
1000: {
项目：3
}
}
});
});

---

在此方面的协助将不胜感激

为了澄清，您需要两个旋转器，每个旋转器显示两行？对于总共4个旋转图像？2个转盘是，每个转盘有2行。但每个旋转木马都有许多项目。基本上，我想要JSFIDLE中显示的内容：除了重复两次。我已经和一个一起工作了，但是激活2对我不起作用。