kv4nt/yii2-owl-carousel2

一个用于 Owl Carousel 2 的 Yii2 小部件

安装次数: 79,050

依赖项: 6

建议者: 0

安全性: 0

星标: 7

关注者: 2

分支: 4

开放问题: 0

类型:yii2-extension

v1.0.5 2022-07-20 08:31 UTC

This package is auto-updated.

Last update: 2024-09-20 19:24:57 UTC


README

OwlCarouselWidget 是 [Owl Carousel 2] (https://owlcarousel2.github.io/OwlCarousel2/) 的 Yii2 包装器

Latest Stable Version Total Downloads

安装

安装此扩展的首选方式是通过 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(); ?>