kriss / yii2-swiper-widget
Yii2 Swiper Widget
Installs: 855
Dependents: 0
Suggesters: 0
Security: 0
Stars: 5
Watchers: 3
Forks: 1
Open Issues: 0
Type:yii2-extension
Requires
- npm-asset/swiper: 4.*
- yiisoft/yii2: *
This package is auto-updated.
Last update: 2024-10-29 00:12:31 UTC
README
Yii2 Swiper Widget
-
配置方便
-
同一个界面可以存在多个轮播,且不冲突
安装
composer require kriss/yii2-swiper-widget
"kriss/yii2-swiper-widget": "^1.0"
简单使用
显示轮播
<?php use yii\helpers\Html; echo \kriss\swiper\SwiperWidget::widget([ 'slides' => [ Html::img('http://img.zcool.cn/community/01665258173c34a84a0d304fc68fdf.jpg'), Html::img('http://img.zcool.cn/community/01665258173c34a84a0d304fc68fdf.jpg'), Html::img('http://img.zcool.cn/community/01665258173c34a84a0d304fc68fdf.jpg'), ], 'pagination' => true, 'navigation' => true, 'scrollbar' => true, 'clientOptions' => [ 'speed' => 200, 'loop' => true, 'on' => [ 'init' => new \yii\web\JsExpression('function() {}') ], ] ]);
高级使用
自定义操控,自定义js
<?php use yii\helpers\Html; // swiper js 初始化后赋值给的变量名 $swiperEl = 'swiper'; echo \kriss\swiper\SwiperWidget::widget([ 'slides' => [ Html::img('http://img.zcool.cn/community/01665258173c34a84a0d304fc68fdf.jpg'), Html::img('http://img.zcool.cn/community/01665258173c34a84a0d304fc68fdf.jpg'), Html::img('http://img.zcool.cn/community/01665258173c34a84a0d304fc68fdf.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);
单页面宣传海报,带动画
使用 AnimatedSwiperSlideWidget
echo SwiperWidget::widget([ 'slides' => [ AnimatedSwiperSlideWidget::widget([ 'imageBaseUrl' => '@public/images/post', 'bgUrl' => 'bg.jpg', 'itemSizeUnit' => 'rem', 'items' => [ ['bonus_01.png', [6.4, .87, 0, .3], ['zoomIn', 1.5, 0]], ['bonus_02.jpg', [6.4, .55, 1.5, 0], ['fadeIn', 0.5, 1.5]], ['001.png', [6.4, 3.75, 2.8, 0], ['rotateInDownLeft', 0.5, 2]], ['002.png', [6.4, 3.75, 2.8, 0], ['bounceInDown', 1.5, 2.5]], ['003.png', [6.4, 2.25, 6.4, 0], ['fadeInUp', 0.5, 4]], ], ]), AnimatedSwiperSlideWidget::widget([ 'imageBaseUrl' => '@public/images/post', 'bgUrl' => 'bg.jpg', 'itemSizeUnit' => 'rem', 'items' => [ ['bonus_01.png', [6.4, .87, 0, .3], ['zoomIn', 1.5, 0]], ['bonus_02.jpg', [6.4, .55, 1.5, 0], ['fadeIn', 0.5, 1.5]], ['001.png', [6.4, 3.75, 2.8, 0], ['rotateInDownLeft', 0.5, 2]], ['002.png', [6.4, 3.75, 2.8, 0], ['bounceInDown', 1.5, 2.5]], ['003.png', [6.4, 2.25, 6.4, 0], ['fadeInUp', 0.5, 4]], ], ]), ], 'pagination' => false, 'navigation' => false, 'clientOptions' => [ 'direction' => 'vertical', 'on' => [ 'init' => new JsExpression('function() {swiperAnimateCache(this);swiperAnimate(this);}'), 'slideChangeTransitionEnd' => new JsExpression('function() {swiperAnimate(this);}'), ], ], ]);