Autoplay using nextjs 13 not working

[gmcamposano]

Using the autoplay function alone is not working. I had to include a code to make it work without the autoplay.

Any idea why?

export default function FullWidthImageSlider() {
  const [emblaRef, emblaApi] = useEmblaCarousel(
    {
      loop: true,
    },
    [Autoplay()]
  );

//THIS IS THE WORKAROUND TO MAKE IT FUNCTION... Which is not ideal
  // const autoplay = useCallback(() => {
  //   if (!emblaApi) return;
  //   if (emblaApi.canScrollNext()) {
  //     emblaApi.scrollNext();
  //   } else {
  //     emblaApi.scrollTo(0);
  //   }
  // }, [emblaApi]);

  // useEffect(() => {
  //   const interval = setInterval(() => {
  //     autoplay();
  //   }, 5000);
  //   return () => clearInterval(interval);
  // }, [autoplay]);

  return (
    <div
      className="mx-auto h-screen max-h-[1300px] min-h-[600px] max-w-screen-2xl overflow-hidden"
      ref={emblaRef}
    >
      <div className="relative flex">
        {images.map((image) => (
          <div className="flex-[0_0_100%]" key={image.id}>
            <Image
              key={image.id}
              src={image.src}
              alt="Picture of the author"
              quality={50}
              className="brightness-95"
              width={1920}
              height={1080}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

[davidjerleke]

Hi @gmcamposano,

Thanks for your question. I'm missing crucial information:

• What do you mean it's not working? Does it throw an error? Or does it fail silently?
• What versions of embla-carousel-react and embla-carousel-autoplay are you using?
• How do you import embla-carousel-autoplay? You left out that part in your code.

David

[gmcamposano]

Hi David. Sure! i will try to add as much details as possible.

1. Autoplay simply does not change slides. Manually changing it works well. I tried adding a delay and does nothing - it just stays there.
2. Versions:
   "embla-carousel-autoplay": "^8.0.0-rc03",
   "embla-carousel-react": "^7.1.0",
3. import useEmblaCarousel from "embla-carousel-react";
   import Autoplay from "embla-carousel-autoplay";

[gmcamposano]

Ok It now works. I am using both:
"embla-carousel-autoplay": "^8.0.0-rc03",
"embla-carousel-react": "^8.0.0-rc03",
It seems that if i used a different version from autoplay plugin, it did not work.

[davidjerleke]

Thanks for the additional details @gmcamposano.

Ok It now works. I am using both:
"embla-carousel-autoplay": "^8.0.0-rc03",
"embla-carousel-react": "^8.0.0-rc03",
It seems that if i used a different version from autoplay plugin, it did not work.

Yes. Ideally, you should use the same version for the main package (embla-carousel-react in this case) and the plugin. In your case the main package was an entire major version behind. And major releases have breaking changes so they won't be compatible in many cases.

Best,
David