owl2row beta

Owl Carousel plugin

by anish274

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">
<section id="demos">
    <div class="row">
        <div id="owl2row-plugin" class="owl-carousel">
            <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 class="item">
                <h4>11</h4>
            </div>
            <div class="item">
                <h4>12</h4>
            </div>

            <div class="item">
                <h4>13</h4>
            </div>
        </div>
    </div>
</section>

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

$(function () {
        var owl = $('#owl2row-plugin');
        owl.owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            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: 3
                },
                1000: {
                    items: 5
                }
            }
        });
});

/**
 * 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.$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) {
         ...