dominus77/yii2-owl-carousel-2

Renders a Owl Carousel 2 widget for Yii2.

yii2-owl-carousel-2

, _(*1)

Renders a Owl Carousel 2 widget for Yii2., _(*2)

Installation

The preferred way to install this extension is through composer., _(*3)

Either run, _(*4)

php composer.phar require dominus77/yii2-owl-carousel-2

or add, _(*5)

"dominus77/yii2-owl-carousel-2": "^1.0"

to the require section of your composer.json file., _(*6)

Usage

Once the extension is installed, simply use it in your code by :, _(*7)

Basic

Variant 1:, _(*8)

<?= \dominus77\owlcarousel2\Carousel::widget([
    'items' => $this->render('@dominus77/owlcarousel2/example/_items'), // example
    //'theme' => \dominus77\owlcarousel2\Carousel::THEME_GREEN, // THEME_DEFAULT, THEME_GREEN
    //'tag' => 'div', // container tag name, default div
    //'containerOptions' => [/* ... */], // container html options
    'clientOptions' => [
        'loop' => true,
        'margin' => 10,
        'nav' => true,
        'responsive' => [
            0 => [
                'items' => 1,
            ],
            600 => [
                'items' => 3,
            ],
            1000 => [
                'items' => 5,
            ],
        ],
    ],
]); ?>

Items, _(*9)

<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>

Variant 2, Wrap Carousel:, _(*10)

 \dominus77\owlcarousel2\Carousel::THEME_GREEN, // THEME_DEFAULT, THEME_GREEN
    //'tag' => 'div', // container tag name, default div
    //'containerOptions' => [/* ... */], // container html options
    'clientOptions' => [
        'loop' => true,
        'margin' => 10,
        'nav' => true,
        'responsive' => [
            0 => [
                'items' => 1,
            ],
            600 => [
                'items' => 3,
            ],
            1000 => [
                'items' => 5,
            ],
        ],
    ],
]); ?>

    <!-- begin Items -->
    <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>
    <!-- end Items -->

Responsive

<?= \dominus77\owlcarousel2\Carousel::widget([
    'items' => $this->render('@dominus77/owlcarousel2/example/_items'), // example
    'clientOptions' => [
        'loop' => true,
        'margin' => 10,
        'responsiveClass' => true,
        'responsive' => [
            0 => [
                'items' => 1,
                'nav' => true,
            ],
            600 => [
                'items' => 3,
                'nav' => false,
            ],
            1000 => [
                'items' => 5,
                'nav' => true,
                'loop' => false,
            ],
        ],
    ],
]); ?>

Animate

<?= \dominus77\owlcarousel2\Carousel::widget([
    'items' => $this->render('@dominus77/owlcarousel2/example/_items'), // example
    'clientOptions' => [
        'animateOut' => 'slideOutDown',
        'animateIn' => 'flipInX',
        'items' => 1,
        'margin' => 30,
        'stagePadding' => 30,
        'smartSpeed' => 450,
    ],
]); ?>

Autoplay

<?= \dominus77\owlcarousel2\Carousel::widget([
    'items' => $this->render('@dominus77/owlcarousel2/example/_items'), // example
    'clientOptions' => [
        'items' => 4,
        'loop' => true,
        'margin' => 10,
        'autoplay' => true,
        'autoplayTimeout' => 1000,
        'autoplayHoverPause' => true,
    ],
    'clientScript' => new \yii\web\JsExpression("
        $('.play').on('click',function(){
            owl.trigger('play.owl.autoplay',[1000])
        })
        $('.stop').on('click',function(){
            owl.trigger('stop.owl.autoplay')
        })
    "),
]); ?>
<hr>
<a class="btn btn-primary play">Play</a>
<a class="btn btn-primary stop">Stop</a>

Demo

Pleas, check the Demos, _(*11)

More Information

Please, check the Owl Carousel 2, _(*12)

License

The MIT License (MIT). Please see License File for more information., _(*13)