汤牛七/yii2-swiper

Yii 框架的 swiper 小部件

维护者

详细信息

github.com/tangniyuqi/yii2-swiper

主页

源代码

问题

安装: 37

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

类型:yii2-widget

1.2.0 2018-06-28 16:42 UTC

Requires

MIT ad043935cc48a796ea54c02891a7201e239dd067

widgetyii2swiper

This package is auto-updated.

Last update: 2024-09-20 10:02:14 UTC

README

  • 配置方便

  • 同一个界面可以存在多个轮播，且不冲突

  • swiper 4.0+

安装

php composer.phar require --prefer-dist tangniyuqi/yii2-swiper "*" -vvv

"tangniyuqi/yii2-swiper": "*"

简单使用

显示轮播

<?php
use yii\helpers\Html;

echo \tangniyuqi\swiper\Swiper::widget([
    'slides' => [
        Html::img('http://abc.com/1.jpg'),
        Html::img('http://abc.com/2.jpg'),
        Html::img('http://abc.com/3.jpg'),
    ],
    'pagination' => true,
    'navigation' => true,
    'scrollbar' => true,
    'clientOptions' => [
        'speed' => 200,
        'loop' => true,
    ]
]);

高级使用

自定义操控，自定义js

<?php
use yii\helpers\Html;

//swiper js 初始化后赋值给的变量名
$swiperEl = 'swiper';

echo \tangniyuqi\swiper\Swiper::widget([
    'slides' => [
        Html::img('http://abc.com/1.jpg'),
        Html::img('http://abc.com/2.jpg'),
        Html::img('http://abc.com/3.jpg'),
    ],
    'pagination' => true,
    'navigation' => true,
    'scrollbar' => true,
    'swiperEl' => $swiperEl, // 在此处传入
    'clientOptions' => [
        'speed' => 200,
        'loop' => true,
    ]
]);

//下一个触发按钮
echo Html::button('next', ['id' => 'to-next']);

$js = <<<JS
  //点击之后触发下一个，更多js操作参考官方
  $('#to-next').click(function() {
    {$swiperEl}.slideNext();
  });
JS;

$this->registerJs($js);