https://github.com/krissss/yii2-swiper-widget
Yii2 Swiper Widget
https://github.com/krissss/yii2-swiper-widget
swiper yii2-extension yii2-widgets
Last synced: 6 months ago
JSON representation
Yii2 Swiper Widget
- Host: GitHub
- URL: https://github.com/krissss/yii2-swiper-widget
- Owner: krissss
- Created: 2017-10-20T01:32:06.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-01-28T16:14:19.000Z (over 4 years ago)
- Last Synced: 2025-04-12T22:54:50.147Z (6 months ago)
- Topics: swiper, yii2-extension, yii2-widgets
- Language: PHP
- Size: 11.7 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Yii2 Swiper Widget
==================
Yii2 Swiper Widget
- 配置方便
- 同一个界面可以存在多个轮播，且不冲突
- [swiper 4.0 +](https://swiperjs.com/swiper-api)
安装
------------
```
composer require kriss/yii2-swiper-widget
```
```
"kriss/yii2-swiper-widget": "^1.0"
```
简单使用
-----
显示轮播
```php
[
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
[
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 = <<registerJs($js);
```
单页面宣传海报，带动画
-----
使用 AnimatedSwiperSlideWidget
```php
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);}'),
],
],
]);
```