Open juansalvatore opened 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
I'm taking a look on this
Hope that works, this is good to review/QA @akiran @juansalvatore
"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