AutoPlay and showOnHover property not working Properly

[AbhayaShankar]

autoPlay I made a card slider with autoplay value to be true, but the slider doesn't start till I made a click on the next or little buttons provided for the animations.

sowOnHover Also showOnHover is not working, it still goes on with the animations and timeIntervals

[AbhayaShankar]

<div className="carousel-slider">
        <Carousel
          showThumbs={false}
          autoPlay={true}
          showArrows={true}
          infiniteLoop={true}
          transitionTime={3}
          showStatus={false}
          stopOnHover={true}
        >
          {popularMovies.map((movie) => {
            return (
              <Link
                style={{ textDecoration: "none", color: "white" }}
                to={`/movie/${movie.id}`}
              >
                <div key={movie.id} className="posterImage">
                  <img
                    src={`https://image.tmdb.org/t/p/original${
                      movie && movie.backdrop_path
                    }`}
                    alt="movie-poster"
                    onLoad={() => {
                      // notify the Carousel component that the image is loaded
                      window.dispatchEvent(new Event("resize"));
                    }}
                  />
                </div>
                <div className="poster__overlay">
                  <div className="poster__title">
                    {movie ? movie.original_title : ""}
                  </div>
                  <div className="poster__release">
                    {movie ? movie.release_date : ""}
                    <span className="poster__rating">
                      {" "}
                      {movie.vote_average}
                      <StarIcon
                        sx={{
                          color: "#ffc600",
                          fontSize: "32px",
                          paddingTop: "6px",
                          marginLeft: "6px",
                        }}
                      />
                    </span>
                  </div>
                  <div className="poster__desc">
                    {movie ? movie.overview : ""}
                  </div>
                </div>
              </Link>
            );
          })}
        </Carousel>
      </div>

[cereme]

I have same issue on 3.2.21

[AbhayaShankar]

Did you understand what was the issue... I still don't have a clue

[tandrasi]

hey all, I've been having this issue forever but now the client actually complained about it. So, I tried finding a fix and I found this: https://github.com/leandrowd/react-responsive-carousel/issues/321.

If you read it, you're told to either:

1. Don't render the carousel until you have content (i.e. if you have an API call for data, ensure to render when the carousel is not empty). I tried this but it didn't work - I was already stopping render until my API call was complete and my items were built;
2. Simply add in a "key" prop to the Carousel which is the length of the items to be rendered inside the carousel. This worked for me!

<Carousel key={testimonials.length} className='carousel' swipeable ...

[SomeBrujah]

hey all, I've been having this issue forever but now the client actually complained about it. So, I tried finding a fix and I found this: #321.

If you read it, you're told to either:

1. Don't render the carousel until you have content (i.e. if you have an API call for data, ensure to render when the carousel is not empty). I tried this but it didn't work - I was already stopping render until my API call was complete and my items were built;
2. Simply add in a "key" prop to the Carousel which is the length of the items to be rendered inside the carousel. This worked for me!

<Carousel key={testimonials.length} className='carousel' swipeable ...

It didn't help. Maybe there are other ideas?

[tandrasi]

hey all, I've been having this issue forever but now the client actually complained about it. So, I tried finding a fix and I found this: #321. If you read it, you're told to either:

1. Don't render the carousel until you have content (i.e. if you have an API call for data, ensure to render when the carousel is not empty). I tried this but it didn't work - I was already stopping render until my API call was complete and my items were built;
2. Simply add in a "key" prop to the Carousel which is the length of the items to be rendered inside the carousel. This worked for me!

<Carousel key={testimonials.length} className='carousel' swipeable ...

It didn't help. Maybe there are other ideas?

Hey @SomeBrujah, would you mind showing some code so I can help you track down the issue?

[SomeBrujah]

@tandrasi I don't know but now stopOnHover work for me. Maybe this happened when I added className like you did it. Thanks🤝

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.