akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.72k stars 2.1k forks source link

slickGoTo has the wrong animation direction when moving from the first to last index #1869

Open juansalvatore opened 4 years ago

juansalvatore commented 4 years ago

"slickGoTo" has the wrong animation direction when moving from the first to last index and from last to first

Codesandbox example: https://codesandbox.io/s/slickgoto-issue-dhf76 Steps to reproduce:

This happens either way if infinite is set to true in center mode

juansalvatore commented 4 years ago

A temporary work around I was able to find was this:

useEffect(() => {
      if (!carouselRef.current?.slickGoTo) return;
      const isBorderCase =
        (selectedVariationIndex > previousSelectedVariation.current &&
          selectedVariationIndex - previousSelectedVariation.current > selectedAssetVariationsLength / 2) ||
        (previousSelectedVariation.current > selectedVariationIndex &&
          previousSelectedVariation.current - selectedVariationIndex > selectedAssetVariationsLength / 2);

      if (isBorderCase) {
        const isForward = previousSelectedVariation.current - selectedVariationIndex > 0;

        if (isForward) {
          const nextIndex =
            (previousSelectedVariation.current - selectedVariationIndex - selectedAssetVariationsLength) * -1 +
            selectedAssetVariationsLength;
          carouselRef.current?.slickGoTo(nextIndex);

          previousSelectedVariation.current = selectedVariationIndex;
          return;
        }
        const previousIndex = selectedVariationIndex - selectedAssetVariationsLength;
        carouselRef.current?.slickGoTo(previousIndex);

        previousSelectedVariation.current = selectedVariationIndex;
        return;
      }

      carouselRef.current?.slickGoTo(selectedVariationIndex);
      previousSelectedVariation.current = selectedVariationIndex;
    }, [selectedAssetVariationsLength, selectedVariationIndex]);

It still has the issue that if the user clicks fast enough the animation has the same bug shared in the issue

mrviniciux commented 3 years ago

I'm taking a look on this

mrviniciux commented 3 years ago

Hope that works, this is good to review/QA @akiran @juansalvatore