README

为 Yii2 渲染 Owl Carousel 2 小部件。

安装

通过 composer 安装此扩展是首选方法。

运行

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

或添加

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

到您的 composer.json 文件的 require 部分中。

使用

扩展安装完成后，只需在代码中使用它即可：

基本

变体 1

<?= \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,
            ],
        ],
    ],
]); ?>

项目

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

变体 2，包裹轮播

<?php \dominus77\owlcarousel2\WrapCarousel::begin([
    //'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,
            ],
        ],
    ],
]); ?>

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

<?php \dominus77\owlcarousel2\WrapCarousel::end() ?>

响应式

<?= \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,
            ],
        ],
    ],
]); ?>

动画

<?= \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,
    ],
]); ?>

自动播放

<?= \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>

演示

请查看 演示

更多信息

请查看 Owl Carousel 2

许可证

MIT 许可证 (MIT)。更多信息请参阅 许可证文件