Slick: On init event not working!

Created on 7 Aug 2018  路  2Comments  路  Source: kenwheeler/slick

Hi.
The start event does not work

var Slider = $('section.slider'); Slider.slick({ draggable: false, dots: false, infinite: true, speed: 1000, fade: true, cssEase: 'linear' }).on('init', function (event, slick, direction) { Slider.addClass("asdadas"); $('.item[data-slick-index=0]', Slider).addClass("active"); }).on('beforeChange', function (event, slick, currentSlide, nextSlide) { $('.item', Slider).removeClass("active"); $('.item[data-slick-index=' + nextSlide + ']', Slider).addClass("active"); });

https://jsfiddle.net/8yf4Ljok/

Most helpful comment

Add the init listener before you initialize Slick.

                Slider.on('init', function (event, slick, direction) {
                    Slider.addClass("asdadas");
                    $('.item[data-slick-index=0]', Slider).addClass("active");
                }).slick({
                    draggable: false,
                    dots: false,
                    infinite: true,
                    speed: 1000,
                    fade: true,
                    cssEase: 'linear'
                }).on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                    $('.item', Slider).removeClass("active");
                    $('.item[data-slick-index=' + nextSlide + ']', Slider).addClass("active");
                });

https://jsfiddle.net/8yf4Ljok/8/

All 2 comments

Add the init listener before you initialize Slick.

                Slider.on('init', function (event, slick, direction) {
                    Slider.addClass("asdadas");
                    $('.item[data-slick-index=0]', Slider).addClass("active");
                }).slick({
                    draggable: false,
                    dots: false,
                    infinite: true,
                    speed: 1000,
                    fade: true,
                    cssEase: 'linear'
                }).on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                    $('.item', Slider).removeClass("active");
                    $('.item[data-slick-index=' + nextSlide + ']', Slider).addClass("active");
                });

https://jsfiddle.net/8yf4Ljok/8/

chaining the init event before initializing Slick worked for me. i'd say this issue should be closed.

Was this page helpful?
0 / 5 - 0 ratings