Slick: CSs transition bugs with .slick-active

[stevenbriscoeca]

Hello,

My problem is that if I add style with slick-active,every 5-6 slide change, it bugs and ignores the transition.

You can see it here :
http://jsfiddle.net/s2s5otg2/

Windows 8.1
Chrome Version 42.0.2311.90 m

(it happends at the very last slide in this gif)

[ethanclevenger91]

This issue is happening when you slide between the first and last slides in either direction. I run into the same issue while imitating the center mode demo on the demo site.

For mine, I noticed that I was applying styles based on .slick-active while the demo site was using .slick-center. Indeed, swapping .slick-active for .slick-center fixed the delay. .slick-active is also being used by @stephenbe's demo. I swapped it for .slick-current, but it didn't solve the issue, so I wonder if there's a delay in either of those classes being applied when going from the first to last slide (or last to first) that isn't being experienced by .slick-center?

[yangkennyk]

I'm experiencing this too. It's because between the last and first slide when you have infinite scroll, the "loop" back to the first slide is moving the first slide element in position instead of "sliding" from the right.

instead of just sliding in from the right, it slides then essentially goes from display:none to display:block sort of.

not sure of a work around right now.

[JoJk0]

Same here. It is so annoying...

[twmulloy]

+1, .slick-center fixed for me

[wannesderoy]

+1. Using the .slick-center class instead of the .slick-current or .slick-active worked for me too. Thanks a lot!

[Burtoss]

+1, .slick-center fixed for me

[shaunroot]

I'm not using center mode as I do not want to show half a slide on each edge (7 slides on screen), so I can't use .slick-center. Has anyone found another fix?

[Mentor-kh]

Same issue I have. The only thing I want underline, is Impossibility of using .slick-center class, in case, I have
centerMode: true, slidesToShow: 3, options, so I need to use .slick-active class. Which has some buggy behaviour. I think, the reason is using and updating DOM with clones

[Mr-Chilly]

+1 bump!

[camilocls]

+1 This issue continues in the version 1.8.0.
I take the Slick version from the demo site and work fine.

[Stomen]

+1, .slick-center

[cliffasaurus]

since .slick-center seems to be the consistent and true active class wherein
on beforeChange:
| Slide | | Active | | Center (+ Active) | | Active | | Slide |

$('.carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
            $('.slick-slide').removeClass('slick-try');
            $('.slick-center').addClass('slick-try');
            $('.slick-center').next().next().addClass('slick-try');
          });

        $('.slick-prev').click(function() {
          $('.carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
            $('.slick-slide').removeClass('slick-try');
            $('.slick-center').addClass('slick-try');
            $('.slick-center').prev().prev().addClass('slick-try');
          });
        });  

and then style '.slick-try'

*this is for when I wanted 3 slides (the three active slides) to have my desired animation/transition

[alenvuletic]

+1 same issue here

[Duncan-Mckenna]

Using the slick-center class with a transition-delay: .05s on whatever properties I'm animating sorted this out for me.

I think the delay helps give that extra margin of time to begin the transition properly.

[mikopolis]

Using slick-center only works if you are showing one slide. With slidesToShow: 3 and centerMode: true, only the middle class has slick-center