yzerkal/slick-slide

你将永远需要的最后一个轮播组件

维护者

详细信息

github.com/yzerkal/slick-slide

源代码

问题

安装次数: 1

依赖: 0

推荐者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 1

类型:yii2-extension

dev-master 2015-08-22 17:43 UTC

Requires

  • bower-asset/slick-carousel: 1.5.5

MIT ed58b1997a322ccfa696d14f38f26538da5fff75

  • Pascal Brewing <pascalbrewing.woop@gmail.com>

extensionresponsiveyii2js-carousel

This package is not auto-updated.

Last update: 2024-10-02 10:19:27 UTC

README

此仓库是 DrMabuse23/yii2-slick 的副本，除了 composer.json 中的硬编码 slick-slide 版本

yii2-slick

预览 http://kenwheeler.github.io/slick/

这是一个用于惊人的 slick-carousel 的 yii2 小部件。此小部件只生成 JavaScript。

### 安装 Composer yzerkal/slick-slide:"*"

安装资产 Bower

cd vendor/yzerkal/slick-slide/web

bower install

### 使用


	\drmabuse\slick\SlickWidget::widget([
		'container' => '.single-item',
		'settings'  => [
			'slick' => [
				'infinite'      =>  true,
				'slidesToShow'  =>  3,
				'onBeforeChange'=> new \yii\web\JsExpression('function(){
				}'),
				'onAfterChange' => new \yii\web\JsExpression('function(){
					console.debug(this);
				}'),
				'responsive' => [
					[
						'breakpoint'=> 768,
						  'settings'=> [
							  'arrows'=> false,
							  'centerMode'=> true,
							  'centerPadding'=> 40,
							  'slidesToShow'=> 3
						  ]
					]
				],
			],
			'slickGoTo'         => 3,
		]
	]);

    <div class="slider single-item">
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
        <div><h3>4</h3></div>
        <div><h3>5</h3></div>
        <div><h3>6</h3></div>
    </div>