README

关于

这是yii2扩展小部件，用于渲染js滑块 Swiper。这个小部件允许简单地渲染网页中的滑块。为Yii2框架创建。

这个小部件基于 coderius 的工作。

这个存储库的唯一目的是将swiperjs库升级到最新版本。

安装

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

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

composer require algsupport/yii2-swiperjs-8:^1.0

或者在composer.json中添加

"algsupport/yii2-swiperjs-8": "^1.0"

然后运行 composer update

用法

具有最小选项的小部件

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

在所有包含小部件的文件中，将命名空间添加到使用类，例如

<?php
namespace yournamespace

use algsupport\swiperjs8\SwiperSlider;

//Code ...

在视图文件中渲染小部件

<?php
    echo \algsupport\swiperjs8\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 \algsupport\swiperjs8\SwiperSlider::widget([
        // 'on ' . \algsupport\swiperjs8\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" => \algsupport\yii2-swiperjs-8\SwiperSlider::getItemCssClass(SwiperSlider::SCROLLBAR),
                    "hide" => true,
                ],
        ],

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

小部件选项

事件:

• EVENT_BEFORE_REGISTER_DEFAULT_ASSET
• EVENT_AFTER_REGISTER_DEFAULT_ASSET

在widget中使用

echo \algsupport\yii2-swiperjs-8\SwiperSlider::widget([
    ...
'on ' . \algsupport\yii2-swiperjs-8\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" => \algsupport\yii2-swiperjs-8\SwiperSlider::getItemCssClass(SwiperSlider::SCROLLBAR),
            "hide" => true,
        ],
],

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

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

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

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

致谢

• Sergio Coderius

许可证

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