kv4nt / yii2-owl-carousel2
一个用于 Owl Carousel 2 的 Yii2 小部件
v1.0.5
2022-07-20 08:31 UTC
Requires
- bower-asset/owl.carousel: *
- yiisoft/yii2: *
README
OwlCarouselWidget 是 [Owl Carousel 2] (https://owlcarousel2.github.io/OwlCarousel2/) 的 Yii2 包装器
安装
安装此扩展的首选方式是通过 composer.
运行以下命令:
php composer.phar require --prefer-dist kv4nt/yii2-owl-carousel2 "*"
或者将以下内容添加到你的 composer.json
文件的 require 部分:
"kv4nt/yii2-owl-carousel2": "*"
插件选项
请查看 https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
用法
安装扩展后,只需在你的代码中通过以下方式使用它:
<?php use kv4nt\owlcarousel\OwlCarouselWidget; OwlCarouselWidget::begin([ 'container' => 'div', 'assetType' => OwlCarouselWidget::ASSET_TYPE_CDN, 'jqueryFunction' => 'jQuery',// or $ 'containerOptions' => [ 'id' => 'container-id', 'class' => 'container-class owl-theme' ], 'pluginOptions' => [ 'autoplay' => true, 'autoplayTimeout' => 3000, 'items' => 3, 'loop' => true, 'itemsDesktop' => [1199, 3], 'itemsDesktopSmall' => [979, 3] ] ]); ?> <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 OwlCarouselWidget::end(); ?>