README

Yii2扩展，用于jQuery Slick Carousel插件。更多信息请参阅：http://kenwheeler.github.io/slick/。

安装

您可以通过Composer获取此扩展。有两种方法

1. 在终端中运行

$ php composer.phar require "evgeniyrru/yii2-slick" "*"

1. 或者添加

"evgeniyrru/yii2-slick" : "*"

到您应用程序的composer.json文件的require部分。然后运行终端中的composer install命令

$ php composer.phar install

使用方法

这是运行Yii2小部件的常见方式。

<?php

use evgeniyrru\yii2slick\Slick;
use yii\web\JsExpression;
?>

Something html here

<?=Slick::widget([

        // HTML tag for container. Div is default.
        'itemContainer' => 'div',

        // HTML attributes for widget container
        'containerOptions' => ['class' => 'container'],

        // Position for inclusion js-code
        // see more here: https://yiiframework.cn/doc-2.0/yii-web-view.html#registerJs()-detail
        'jsPosition' => yii\web\View::POS_READY,

        // It possible to use Slick.js events
        // see more: http://kenwheeler.github.io/slick/#events
        'events' => [
            'edge' => 'function(event, slick, direction) {
                           console.log(direction);
                           // left
                      });'
        ],

        // Items for carousel. Empty array not allowed, exception will be throw, if empty 
        'items' => [
            Html::img('/cat_gallery/cat_001.png'),
            Html::img('/cat_gallery/cat_002.png'),
            Html::img('/cat_gallery/cat_003.png'),
            Html::img('/cat_gallery/cat_004.png'),
            Html::img('/cat_gallery/cat_005.png'),
        ],

        // HTML attribute for every carousel item
        'itemOptions' => ['class' => 'cat-image'],

        // settings for js plugin
        // @see http://kenwheeler.github.io/slick/#settings
        'clientOptions' => [
            'autoplay' => true,
            'dots'     => true,
            // note, that for params passing function you should use JsExpression object
            // but pay atention, In slick 1.4, callback methods have been deprecated and replaced with events.
            'onAfterChange' => new JsExpression('function() {console.log("The cat has shown")}'),
        ],

    ]); ?>

如果您想使用breakpoints功能，可以输入类似的内容

<?php

use evgeniyrru\yii2slick\Slick;
use yii\web\JsExpression;

<?=Slick::widget([

        // Widget configuration. See example above.

        // settings for js plugin
        // @see http://kenwheeler.github.io/slick/#settings
        'clientOptions' => [
                'dots'     => true,
                'speed'    => 300,
                'autoplay' => true,
                'infinite' => false,
                'slidesToShow' => 4,
                'slidesToScroll' => 4,
                'responsive' => [
                    [
                        'breakpoint' => 1200,
                        'settings' => [
                            'slidesToShow' => 4,
                            'slidesToScroll' => 4,
                            'infinite' => true,
                            'autoplay' => true,
                            'dots' => true,
                        ],
                    ],
                    [
                        'breakpoint' => 992,
                        'settings' => [
                            'slidesToShow' => 4,
                            'slidesToScroll' => 4,
                            'infinite' => true,
                            'autoplay' => true,
                            'dots' => true,
                        ],
                    ],
                    [
                        'breakpoint' => 768,
                        'settings' => [
                            'slidesToShow' => 2,
                            'slidesToScroll' => 2,
                            'infinite' => true,
                            'autoplay' => true,
                            'dots' => true,
                        ],
                    ],
                    [
                        'breakpoint' => 480,
                        'settings' => 'unslick', // Destroy carousel, if screen width less than 480px
                    ],

                ],
        ],

    ]); ?>

?>

问题

如果出现一些问题，您可以在问题中创建问题。

感谢您的关注。