The last carousel you'll ever need for Yii2
Yii2 Slick uses Slick
Demo: http://kenwheeler.github.io/slick
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"- PHP 7.4+
- yiisoft/yii2
- npm-asset/slick-carousel
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
'<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>',
],
'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' => <button type="button" class="slick-next">next</button>, // string (html | jQuery selector) | object (DOM node | jQuery object), default `<button type="button" class="slick-next">next</button>`
// 'pauseOnDotsHover' => false, // boolean, default `false`
// 'pauseOnFocus' => true, // boolean, default `true`
// 'pauseOnHover' => true, // boolean, default `true`
// 'prevArrow' => <button type="button" class="slick-prev">previous</button>, // string (html | jQuery selector) | object (DOM node | jQuery object), default `<button type="button" class="slick-prev">previous</button>`
// '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");
// }',
],
]);Read more docs: https://sugengsulistiyawan.my.id/docs/opensource/yii2/slick/