Slick Carousel Starts Blinking Below 991 Screen Width

[fizantws]

The React Slick carousel is experiencing a consistent issue where it starts to blink uncontrollably when the screen width falls below 991 pixels. This behavior severely impacts user experience and renders the carousel functionality unusable on smaller screens. Here is video link: Click here for issue

const settings = {
    infinite: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    initialSlide: 1,
    arrows: true,
    focusOnSelect: true,
    accessibility: false,
    dots: true,
    autoPlay: false,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          autoPlay: false,
          initialSlide: 1,
        },
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          autoPlay: false,
          initialSlide: 1,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          autoPlay: false,
          initialSlide: 1,
        },
      },
    ],
    };

 {post?.media?.length > 1 ? (
                        <div className="borderforAll">
                          <SliderComponent settings={settings}>
                            {post?.media?.map((mediaData, index) => (
                              <>
                                {mediaData?.type === "1" ? (
                                  <>
                                    {mediaData?.path?.includes("https") && (
                                      <div key={`ind${index}-${post._id}`}>
                                        <img
                                          src={mediaData.path}
                                          alt=""
                                          className="vid-img-how"
                                        />
                                      </div>
                                    )}
                                  </>
                                ) : mediaData?.type === "2" ? (
                                  <>
                                    {mediaData?.path?.includes("https") && (
                                      <div key={`ind-${post._id}`}>
                                        <VideoPlayer
                                          src={mediaData?.path}
                                          autoPlay={false}
                                          muted={true}
                                          isHeight={true}
                                        />
                                      </div>
                                    )}
                                  </>
                                ) : null}
                              </>
                            ))}
                          </SliderComponent>
                        </div>
                      ) : (
                        <>
                          {post?.media?.map((mediaData, index) => (
                            <>
                              {mediaData?.type === "1" ? (
                                <>
                                  {mediaData?.path?.includes("https") && (
                                    <div className="borderforAll">
                                      <img
                                        src={mediaData.path}
                                        alt=""
                                        className="vid-img-how   "
                                      />
                                    </div>
                                  )}
                                </>
                              ) : mediaData?.type === "2" ? (
                                <>
                                  {mediaData?.path?.includes("https") && (
                                    <div className="borderforAll">
                                      <VideoPlayer
                                        src={mediaData?.path}
                                        autoPlay={false}
                                        muted={true}
                                      />
                                    </div>
                                  )}
                                </>
                              ) : null}
                            </>
                          ))}
                        </>
                      )}`

[akiran]

Unable to replicate this issue