Yii2 Slick ¶

1. Table of Contents
2. Instalation
3. Dependencies
4. Usage

The last carousel you'll ever need for Yii2







Yii2 Slick uses Slick Demo: http://kenwheeler.github.io/slick

Table of Contents ¶

• Yii2 Slick
  • Table of Contents
  • Instalation
  • Dependencies
  • Usage

Instalation ¶Package is available on Packagist, you can install it using Composer.
composer require diecoding/yii2-slick "^1.0"

or add to the require section of your composer.json file.
"diecoding/yii2-slick": "^1.0"

Dependencies ¶

• PHP 7.4+
• yiisoft/yii2
• npm-asset/slick-carousel

Usage ¶Read more demo or settings at http://kenwheeler.github.io/slick

use diecoding\slick\SlickCarousel;

echo SlickCarousel::widget([
'items' => [ // (array) widget elements for the carousel
// HTML content
'1',
'2',
'3',
'4',
'5',
'6',
],
'containerOptions' => [], // (array) HTML attributes to render on the container
'containerTag' => 'div', // (string) HTML tag to render the container
'itemOptions' => [], // (array) HTML attributes for the one item
'itemTag' => 'div', // (string) HTML tag to render items for the carousel
'skipCoreAssets' => false, // (bool) default `false`, `true` if use custom or external slick assets
'pluginOptions' => [ // (array) default `[]`, for option `$(#options['id']).slick(pluginOptions);`
// @see https://github.com/kenwheeler/slick/#settings

// 'accessibility' => true, // boolean, default `true`
// 'adaptiveHeight' => false, // boolean, default `false`
// 'appendArrows' => $(element), // string, default `$(element)`
// 'appendDots' => $(element), // string, default `$(element)`
// 'arrows' => true, // boolean, default `true`
// 'asNavFor' => $(element), // string, default `$(element)`
// 'autoplay' => false, // boolean, default `false`
// 'autoplaySpeed' => 3000, // int, default `3000`
// 'centerMode' => false, // boolean, default `false`
// 'centerPadding' => '50px', // string, default `'50px'`
// 'cssEase' => 'ease', // string, default `'ease'`
// 'customPaging' => n/a, // function, default `n/a`
// 'dots' => false, // boolean, default `false`
// 'dotsClass' => 'slick-dots', // string, default `'slick-dots'`
// 'draggable' => true, // boolean, default `true`
// 'easing' => 'linear', // string, default `'linear'`
// 'edgeFriction' => 0.15, // integer, default `0.15`
// 'fade' => false, // boolean, default `false`
// 'focusOnSelect' => false, // boolean, default `false`
// 'focusOnChange' => false, // boolean, default `false`
// 'infinite' => true, // boolean, default `true`
// 'initialSlide' => 0, // integer, default `0`
// 'lazyLoad' => 'ondemand', // string, default `'ondemand'`
// 'mobileFirst' => false, // boolean, default `false`
// 'nextArrow' => next, // string (html | jQuery selector) | object (DOM node | jQuery object), default `next`
// 'pauseOnDotsHover' => false, // boolean, default `false`
// 'pauseOnFocus' => true, // boolean, default `true`
// 'pauseOnHover' => true, // boolean, default `true`
// 'prevArrow' => previous, // string (html | jQuery selector) | object (DOM node | jQuery object), default `previous`
// 'respondTo' => 'window', // string, default `'window'`
// 'responsive' => null, // array, default `null`
// 'rows' => 1, // int, default `1`
// 'rtl' => false, // boolean, default `false`
// 'slide' => '', // string, default `''`
// 'slidesPerRow' => 1, // int, default `1`
// 'slidesToScroll' => 1, // int, default `1`
// 'slidesToShow' => 1, // int, default `1`
// 'speed' => 300, // int, default `300`
// 'swipe' => true, // boolean, default `true`
// 'swipeToSlide' => false, // boolean, default `false`
// 'touchMove' => true, // boolean, default `true`
// 'touchThreshold' => 5, // int, default `5`
// 'useCSS' => true, // boolean, default `true`
// 'useTransform' => true, // boolean, default `true`
// 'variableWidth' => false, // boolean, default `false`
// 'vertical' => false, // boolean, default `false`
// 'verticalSwiping' => false, // boolean, default `false`
// 'waitForAnimate' => true, // boolean, default `true`
// 'zIndex' => 1000, // number, default `1000`
],
'pluginEvents' => [ // array default `[]`, JQuery events
// @see https://github.com/kenwheeler/slick/#events

// 'afterChange' => 'function(event, slick, currentSlide) {
// console.log("After slide change callback");
// }',
// 'beforeChange' => 'function(event, slick, currentSlide, nextSlide) {
// console.log("Before slide change callback");
// }',
// 'breakpoint' => 'function(event, slick, breakpoint) {
// console.log("Fires after a breakpoint is hit");
// }',
// 'destroy' => 'function(event, slick) {
// console.log("When slider is destroyed, or unslicked.");
// }',
// 'edge' => 'function(event, slick, direction) {
// console.log("Fires when an edge is overscrolled in non-infinite mode.");
// }',
// 'init' => 'function(event, slick) {
// console.log("When Slick initializes for the first time callback. Note that this event should be defined before initializing the slider.");
// }',
// 'reInit' => 'function(event, slick) {
// console.log("Every time Slick (re-)initializes callback");
// }',
// 'setPosition' => 'function(event, slick) {
// console.log("Every time Slick recalculates position");
// }',
// 'swipe' => 'function(event, slick, direction) {
// console.log("Fires after swipe/drag");
// }',
// 'lazyLoaded' => 'function(event, slick, image, imageSource) {
// console.log("Fires after image loads lazily");
// }',
// 'lazyLoadError' => 'function(event, slick, image, imageSource) {
// console.log("Fires after image fails to load");
// }',
],
]);