yii2-slick ¶
Yii2 extension for jQuery Slick Carousel plugin. See more here: http://kenwheeler.github.io/slick/.
Github repository of this extension
Installation ¶
You can get this extension through Composer.
Either run in terminal
$ php composer.phar require "evgeniyrru/yii2-slick" "*"
or add
[javascript]
"evgeniyrru/yii2-slick" : "*"
to the require section of your application's `
composer.json`
file.
Usage ¶
This is a common way to run Yii2 widget.
<?php
use evgeniyrru\yii2slick\Slick;
use use yii\web\JsExpression;
?>
Something html here
<?=Slick::widget([
// HTML tag for container. Div is default.
'itemContainer' => 'div',
// HTML attributes for widget container
'containerOptions' => ['class' => 'container'],
// Items for carousel. Empty array not allowed, exception will be throw, if empty
'items' => [
Html::img('/cat_gallery/cat_001.png'),
Html::img('/cat_gallery/cat_002.png'),
Html::img('/cat_gallery/cat_003.png'),
Html::img('/cat_gallery/cat_004.png'),
Html::img('/cat_gallery/cat_005.png'),
],
// HTML attribute for every carousel item
'itemOptions' => ['class' => 'cat-image'],
// settings for js plugin
// @see http://kenwheeler.github.io/slick/#settings
'clientOptions' => [
'autoplay' => true,
'dots' => true,
// note, that for params passing function you should use JsExpression object
'onAfterChange' => new JsExpression('function() {console.log("The cat has shown")}'),
],
]); ?>
Issues ¶
If some problems occurred, you can create issue.
Thank you for attention.
Different display with slick example
I have install this widget in my yii2 advanced project which backend use adminlte as theme and frontend use built in bootstrap. But, I have problem when I displayed this widget Home view. This is link to my Home view:
my yii2-slick view..
What would be the solution for this? I find your extension very helpful on what I’m doing right now that’s why I need to know if there’s something that you could tell me to fix this.
So strange
Is Asset Manager register required css file? (slick.css). You can clarify it using Chrome Developer Tools. And you can create issue on Github.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.