Transition only works when navigation to the last or first slide on mobile

[anastezia-kz]

I can't provide a SandBox link unfortunately as it's a work project. Below are code snippets and screen recordings.

https://github.com/akiran/react-slick/assets/59059239/91e6ffe7-6ce8-43ca-81ab-523615e4a9ec

https://github.com/akiran/react-slick/assets/59059239/70d70d61-4e73-4326-abe5-18c8592137df

As seen from the screen recording transition property is being applied only when navigating on mobile with arrows for the last and first slides

`import { useState } from 'react'; // react-slick package is not recognized in package.json // eslint-disable-next-line import/no-extraneous-dependencies import Slider from 'react-slick'; // eslint-disable-next-line import/no-extraneous-dependencies import 'slick-carousel/slick/slick.css'; // eslint-disable-next-line import/no-extraneous-dependencies import 'slick-carousel/slick/slick-theme.css'; import { styled } from '@/lib/styled';

const SliderContainer = styled(Box) .slick-dots { position: unset; } section > .slick-slider > .slick-list > .slick-track { display: flex !important; } section > .slick-slider > .slick-list > .slick-track > .slick-slide { height: inherit !important; } .slick-slide > div, .slick-slide > div > section, .slick-slide > div > section > section { height: 100%; } .slick-slide > div { padding-bottom: 16px; } ;

export const Top3Carousel = ({ highlights, productUrl }: ITop3CarouselProps) => { const [slider, setSlider] = useState<Slider | null>(null); const [cardIndex, setCardIndex] = useState(0); const onSlideChange = (prev: number, next: number) => setCardIndex(next); const slickList = document.querySelector('.slick-track'); console.log(slickList); const settings = { infinite: false, speed: 500, slidesToShow: 3, slidesToScroll: 3, beforeChange: onSlideChange, nextArrow: cardIndex === highlights.length - 1 ? undefined : ( <FloatingButton side="right" variant="secondary" position="absolute" onClick={() => slider?.slickNext()} /> ), prevArrow: cardIndex > 0 ? ( <FloatingButton side="left" variant="secondary" position="absolute" onClick={() => slider?.slickPrev()} /> ) : undefined, initialSlide: 0, responsive: [ { breakpoint: 976, settings: { slidesToShow: 2, slidesToScroll: 2, dots: true, nextArrow: cardIndex === 1 ? undefined : ( <FloatingButton side="right" variant="secondary" position="absolute" onClick={() => slider?.slickNext()} /> ), }, }, { breakpoint: 618, settings: { slidesToShow: 1, slidesToScroll: 1, dots: true, }, }, ], }; return (

{/* eslint-disable-next-line react/jsx-props-no-spreading, @typescript-eslint/no-shadow */} setSlider(slider)}> {highlights.map((highlight, index) => ( ))}

); }; `

[akiran]

It is working in our documentation demos.

Some thing could be wrong with your implementation. Please re-check