README

关于

这是一个yii2扩展小部件，用于渲染Swiper.js滑动器（Swiper）。此小部件允许在网页中简单渲染滑动器。为Yii2框架创建。

安装

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

首先下载扩展。在终端运行以下命令

composer require coderius/yii2-swiper-slider:^1.0

或者在composer.json中添加

"coderius/yii2-swiper-slider": "^1.0"

然后运行composer update

用法

具有最小选项的小部件

您只能指定幻灯片的内容。此参数是必需的。

在所有包含小部件的文件中，将命名空间放入使用类

<?php
namespace yournamespace

use coderius\swiperslider\SwiperSlider;

//Code ...

在视图文件中渲染小部件

<?php
    echo \coderius\swiperslider\SwiperSlider::widget([
        'slides' => [
            'one',
            'two',
            'three',
            '<img src="https://swiper.js.cn/demos/images/nature-1.jpg">',
            '<img src="https://swiper.js.cn/demos/images/nature-2.jpg">'
        ],
    ]);
?>

具有更多选项的小部件

您可以自定义小部件的参数

在视图文件中渲染小部件

<?php
    echo \coderius\swiperslider\SwiperSlider::widget([
        // 'on ' . \coderius\swiperslider\SwiperSlider::EVENT_AFTER_REGISTER_DEFAULT_ASSET => function(){
        //     CustomAsset::register($view);
        // },
        'showScrollbar' => true,
        'slides' => [
            [
                'value' => 'ggg',
                'options' => [
                    'style' => ["background-image" => "url(https://swiper.js.cn/demos/images/nature-1.jpg)"]
                ]
            ],
            '<img src="https://swiper.js.cn/demos/images/nature-2.jpg">',
            'one',
            'two',
            'three',
            'fore',
            'five'
        ],
        // 'assetFromCdn' => true,
        'clientOptions' => [
            'slidesPerView' => 4,
            'spaceBetween'=> 30,
            'centeredSlides'=> true,
            'pagination' => [
                'clickable' => true,
                'renderBullet' => new \yii\web\JsExpression("function (index, className) {
                        return '<span class=\"' + className + '\">' + (index + 1) + '</span>';
                    },
                "),
                ],
                "scrollbar" => [
                    "el" => \coderius\swiperslider\SwiperSlider::getItemCssClass(SwiperSlider::SCROLLBAR),
                    "hide" => true,
                ],
        ],

        //Global styles to elements. If create styles for all slides
        'options' => [
            'styles' => [
                \coderius\swiperslider\SwiperSlider::CONTAINER => ["height" => "100px"],
                \coderius\swiperslider\SwiperSlider::SLIDE => ["text-align" => "center"],
            ],
        ],
            
    ]);
?>

小部件选项

事件:

• EVENT_BEFORE_REGISTER_DEFAULT_ASSET
• EVENT_AFTER_REGISTER_DEFAULT_ASSET

在组件中使用

echo \coderius\swiperslider\SwiperSlider::widget([
    ...
'on ' . \coderius\swiperslider\SwiperSlider::EVENT_AFTER_REGISTER_DEFAULT_ASSET => function(){
        CustomAsset::register($view);
},

showScrollbar: true | false。默认为false

showPagination: true | false。默认为true

slides: string | array | 。幻灯片内容可以是或任何字符串。或者带有键的数组：value，options。value可以是字符串或闭包（函数($tag, $index, $self){})）。示例

'slides' => [
        [
            'value' => 'ggg',
            'options' => [
                'style' => ["background-image" => "url(https://swiper.js.cn/demos/images/nature-1.jpg)"]
            ]
        ],
        [
            'value' => function($tag, $index, $self){
                return "some value {$index}";
            },
            'options' => [
                'style' => ["color" => "green"]
            ]
        ],
...

clientOptions: array。这些选项在初始化Swiper.js（new Swiper('options here'））时粘贴。请记住，如果您需要在js插件的配置中添加JavaScript，并且它需要是纯JS，请使用JsExpression类。这个类是由Yii为此特定目的创建的。例如

'clientOptions' => [
    'slidesPerView' => 4,
    'spaceBetween'=> 30,
    'centeredSlides'=> true,
    'pagination' => [
        'clickable' => true,
        'renderBullet' => new \yii\web\JsExpression("function (index, className) {
                return '<span class=\"' + className + '\">' + (index + 1) + '</span>';
            },
        "),
        ],
        "scrollbar" => [
            "el" => \coderius\swiperslider\SwiperSlider::getItemCssClass(SwiperSlider::SCROLLBAR),
            "hide" => true,
        ],
],

options: array。这些选项在渲染DOM元素时粘贴。在此设置html元素的各个属性。这些参数仅适用于所有模板项

//Global styles to elements. If create styles for all slides
'options' => [
    'styles' => [
        \coderius\swiperslider\SwiperSlider::CONTAINER => ["height" => "100px"],
        \coderius\swiperslider\SwiperSlider::SLIDE => ["text-align" => "center"],
    ],
    'class' => [\coderius\swiperslider\SwiperSlider::CONTAINER => ["myClass"],]
],

最好使用常量来指定模板元素

• CONTAINER = 'container';
• WRAPPER = 'wrapper';
• SLIDE = 'slide';
• PAGINATION = 'pagination';
• BUTTON_PREV = 'button-prev';
• BUTTON_NEXT = 'button-next';
• SCROLLBAR = 'scrollbar';

测试

在扩展文件夹中运行测试。

$ ./vendor/bin/phpunit

注意！运行所有测试需要通过composer上传所有依赖项。如果测试单个扩展，则从扩展所在的根目录运行命令

composer update

当所有依赖项都已下载后，从根文件夹在终端运行所有测试

./vendor/bin/phpunit tests

或者仅针对单元测试

./vendor/bin/phpunit --testsuite Unit

如果扩展在应用程序中测试，则设置正确的phpunit路径并运行一些命令。

致谢

• Sergio Coderius

许可

MIT许可（MIT）。有关更多信息，请参阅许可文件。