panix/wgt-slick

Widget Slick

安装: 55

依赖: 0

建议者: 0

安全: 0

星星: 0

关注者: 2

分支: 0

开放问题: 0

类型:pixelion-widget

dev-master 2021-02-01 10:57 UTC

This package is auto-updated.

Last update: 2024-09-29 05:35:56 UTC


README

Slick 是 [Slick](https://kenwheeler.github.io/slick/) (https://kenwheeler.github.io/slick/) 的 Yii2 包装器

Latest Stable Version Total Downloads

安装

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

运行以下命令之一

php composer require --prefer-dist panix/wgt-slick "*"

或者

"panix/wgt-slick": "*"

将以下内容添加到你的 composer.json 文件的 require 部分中。

使用

扩展安装完成后,只需在你的代码中使用它即可

<?php
use panix\ext\slick\SlickWidget;

SlickWidget::begin([
    'containerTag' => 'div',
    'containerOptions' => [
        'class' => 'container-class'
    ],
    'options' => [
        'dots' => true,
        'infinite' => false,
        'slidesToShow' => 4,
        'slidesToScroll' => 4,
        'responsive' => [
            [
                'breakpoint' => 1024,
                'settings' => [
                    'slidesToShow' => 3,
                    'slidesToScroll' => 3,
                    'infinite' => true,
                    'dots' => true
                ]
            ],
            [
                'breakpoint' => 600,
                'settings' => [
                    'slidesToShow' => 2,
                    'slidesToScroll' => 2
                ]
            ],
            [
                'breakpoint' => 480,
                'settings' => [
                    'slidesToShow' => 1,
                    'slidesToScroll' => 1
                ]
            ]
        ]
    ]
]);
?>

<div class="item-class"><img src="/img/1.jpg" alt="Image 1"></div>
<div class="item-class"><img src="/img/2.jpg" alt="Image 2"></div>
<div class="item-class"><img src="/img/3.jpg" alt="Image 3"></div>
<div class="item-class"><img src="/img/4.jpg" alt="Image 4"></div>


<?php SlickWidget::end(); ?>