owl2row beta

Owl Carousel plugin

HTML

<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/css/docs.theme.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/highlight.js"></script>
<script type="text/javascript">
    hljs.configure({tabReplace: '  '});
    hljs.initHighlightingOnLoad();

    $(function () {
        var owl = $('#owl2row-plugin');
        owl.owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 5
                }
            }
        });
});
</script>

<section id="demos">
    <div class="row">

        <div id="owl2row-plugin" class="owl-carousel">
        <div class="owl2row-item">
            <div class="item">
                <h4>1</h4>
            </div>
            <div class="item">
                <h4>2</h4>
            </div>
            <div class="item">
                <h4>3</h4>
            </div>
            <div class="item">
                <h4>4</h4>
            </div>
            <div class="item">
                <h4>5</h4>
            </div>
            <div class="item">
                <h4>6</h4>
            </div>
            <div class="item">
                <h4>7</h4>
            </div>
            <div class="item">
                <h4>8</h4>
            </div>
            <div class="item">
                <h4>9</h4>
            </div>
            <div class="item">
                <h4>10</h4>
            </div>
            <div...

CSS

*,
        *:after,
        *:before {
            -webkit-box-sizing : border-box;
            -moz-box-sizing    : border-box;
            box-sizing         : border-box;
        }

        .row {
            width     : 100%;
            max-width : 720px;
            min-width : 320px;
            margin    : 0 auto;
            padding   : 6px 48px;
        }

JavaScript

/**
 * Owl2row
 * @since 2.0.0
 */
;(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.dom.$el.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) {
           ...