Slick: Init event does not fire and one more issue

Created on 1 Jul 2018  路  2Comments  路  Source: kenwheeler/slick

Hey
The init event is not firing

Here is the jsfiddle - http://jsfiddle.net/7wncfr1e/5/

$('.center').slick({
      centerMode: true,
      centerPadding: '0px',
      slidesToShow: 3,
      arrows: false,
      mobileFirst: true,
      }).on('init', function(event, slick, direction){
          console.log(event);
          console.log('slick initialized');
        }).on('swipe', function(event, slick, direction){
          console.log(event);
          $('.center div.content-slider').removeClass('pre following');
          $('.center div.content-slider.slick-active').first().addClass('pre');
          $('.center div.content-slider.slick-active').last().addClass('following');
        });

Issue 2

When I set slidesToShow as 3, I can see all the 3 sides occupying window.

And if I set the centerPadding, I can see some more slides partially.

It would be good if I set the slidesToShow as 3 and only see the center slide in the window and the other 2 slides partially visible.
Alternatively, if I can set centerPadding to a negative number, that should also work.

I am using this on mobile, on small screen sizes everythin is just tight and squeezed.

Most helpful comment

@arjunmenon please try to add on before slick event.

$('.center').on('init', function(event, slick, direction){
    ...
}).on('swipe', function(event, slick, direction){
    ...
}).slick({
      ...
});

All 2 comments

@arjunmenon please try to add on before slick event.

$('.center').on('init', function(event, slick, direction){
    ...
}).on('swipe', function(event, slick, direction){
    ...
}).slick({
      ...
});

Updated - http://jsfiddle.net/7wncfr1e/10/

There is also this wierd thing with transition going on, if you move the slide from last to the first, it jumps to slide#2 then it goes back to slide#1 Try it.

Swipe the slide to slide 5 and then move to slide 1, you will notice the jump to slide#2 first and then back to slide#1

It doesn't happen when swiping with any other slides, only from the last slide to the first slide when in carousel mode.


Also, how can I set partial view on active slides and just show the current slide as whole. On mobile, slides become tiny or lose aspect ratio and clunky.

I am trying to achieve something like this - https://codepen.io/jedrzejchalubek/pen/MwPBGd?page=2
With the transition as well, where only after the swipe is complete and the slide has changed its position, only then the current slide animates.
At present, as soon as the slide changes position, animation happens.

I am trying to delay transition, how can we do that?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jeremymandel picture jeremymandel  路  3Comments

rahi-rajeev picture rahi-rajeev  路  3Comments

msavov picture msavov  路  3Comments

crstauf picture crstauf  路  3Comments

hoghamburg picture hoghamburg  路  3Comments