panix / wgt-slick
Widget Slick
dev-master
2021-02-01 10:57 UTC
Requires
- bower-asset/slick-carousel: ^1.8.0
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 包装器
安装
通过 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(); ?>