Animation Issue between First and Last Slide

[bogdantatu]

Hello! On my website I have the same issue as in the jsfiddle below. I am using a custom animation for each slide and it works perfectly fine until I slide from the last slide to the first or the other way around. It has a small delay until it animates. Have you encountered this issue before? Thank you!

I have tried solutions that I found in similar issues, but none of them worked.

https://jsfiddle.net/ktfs3hj9/1/

[ubergeoff]

So the problem comes down to "when" the "slick-current" class get applied to the first and last slides...

You see when you reach the end of the carousel in "infinite" mode - the carousel is cycling though all the "cloned" nodes so that it can reset itself. i.e. resetting to the original positions.

So there is a small delay happening before it can actually set the "slick-current" class to the non-cloned node.

So what need to happen - is the carousel needs to be "smarter" in infinite mode - in order to set "slick-current" on one of the adjacent "clone" nodes - before waiting for this "reset" to occur...

Let me see if I can put something together for you by tomorrow....

[ubergeoff]

Here is an example of the fix here:

https://slicker.stackblitz.io/

The main thing here is to ensure that we know how to access the "next" cloned node....

//do cloned slides "selected" manipulation
                if (this.slideCount - 1 === index) {
                    let x = Array.from(this.$slides).find((t) => {
                        return t.classList.contains('slick-clone-start');
                    });
                    x.classList.add('slick-current');
                } else if (index === 0) {
                    let x = Array.from(this.$slides).find((t) => {
                        return t.classList.contains('slick-clone-end');
                    });
                    x.classList.add('slick-current');
                }

[erwindeclerck]

Hi ubergeoff, I do not seem to be able to load your example fix: is it still online? Is there any view on a structural solution? Kind regards...

[ubergeoff]

HI there

Maybe this one: https://stackblitz.com/edit/slicker?file=src/app/slicker.ts

++ full source can be found here:

https://github.com/ubergeoff/flingo/blob/master/libs/slicker/src/lib/slicker.ts

[erwindeclerck]

Hi Thanks for your quick response! These links are ok! I try to understand what you are proposing, but don't see any difference in the "cloned slides 'selected' manipulation if statement" that you mention above with regards to what is actually in the source... I have a combined carousel and a slider where I use the carousel 'asnavfor' the other in a Drupal 8 site. The carousel is centred and infinitive. There are 12 slides and by going from 12 (index 11) to 1 (index 0), the first slide is not found by your script. So the controlled slider pauzes 1 slide and then catches up from the second one up. Site in development: http://dev.alfavisionmuseumservices.eu/ it's the second slider on the beige background... Any suggestion would be more than welcome! Kind regards Erwin

[ubergeoff]

Yeah... i see the issue... I have not worked much with "asNavFor"...

In fact my source I sent you still have it commented out. :(

But I'll try give it a bash on Monday..!

i.e. let me try complete my "asNavFor" work (update) - and then see if I can help...

[erwindeclerck]

Oh wonderful! For the dissolving central image I first tried to add an extra image to the slides of the carousel and only show it when the 'center' class is active but it's very difficult to control because the dimensions of that image plays a role in the calculation width of the carousel items and taking it out of the normal dom-flow (fixed or absolute positioning) is hardly possible anymore because the first parent div has a positioning defined already... so I was kinda forced to go for this solution...

[erwindeclerck]

Hi Ubergeoff, Any progress in this matter? Kind regards, Erwin

[wicaksana94]

hy guys, I got same issue, and I try to change the transitions to fade, and it solved. This is my code :

 $('.testimonials-desktop-slider').slick({
    dots: true,
    arrows: true,
    fade: true,
});

hope this helps

[Dennikoff]

Fix

if fix this issue by adding event handler onBeforeChange:

$('.team-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  const slides = document.querySelectorAll('.team-carousel .slick-slide');
  slides.forEach((slide) => {
    slide.classList.remove('slick-problem');
  })
  if(nextSlide === 0 && currentSlide === slick.$slides.length - 1) {
    problemObject = document.querySelector('.team-carousel .slick-center + .slick-cloned');
    problemObject.classList.add('slick-problem')
  } else if(nextSlide === slick.$slides.length - 1 && currentSlide === 0) {
    problemObject = document.querySelector('.team-carousel .slick-cloned:has(+ .slick-center)');
    problemObject.classList.add('slick-problem')
  }
});

Here we add 'slick-problem' class to the copy of our 1st slide and deleting it everytime before switching slide (because if we return from 0 slide to last we will see 2 center slides).

At the start I added 'slick-current' but it haven't fixed my issue.

and adding css class

  .slick-current {
    height: 100% !important;
  }

  //this class is for bug fixing
  .slick-problem {
    height: 100% !important;
  }

Why this problem happens

In addition I find out why this happens.

We have slides and its copies at the start and in the end. For example we have 5 slides so our carousel will have:

-3(clone clone of 2) -2(clone clone of 3) -1(clone of 4) 0(first) 1 ... 4(last) 5(clone of 0) 6(clone of 1) 7(clone of 2)

While swithing 4 to 0 slide we see the 5th slide(clone of 0) Thats why we dont see animation.

To solve this problem developer add 'slick-center' class to the clone, so we can see animation but im my version of slick slide 'slick-center' added not for 5 slide but for 6th slide.

I hope developer will find this issue and fix it.