[Help]: Changing autoplay delay disables slide animation

[ezanglo]

Summary

First i wanna thank for this wonderful package!

So I'm using shadcn carousel for this, but i think it has the same implementation.
Basically, I have dynamic delay on each of my slide items, i was able to update it, and the delay is working, however, each time the delay is updated, the slide animation get disabled and automatically jumps to the next slide.

This happens not only on autoplay but even just going next and prev slides.

I wonder if im doing it on the wrong place, here's my code:

const { current, setApi } = useCarouselApi({opacity: true});
const [delay, setDelay] = useState(3500);

useEffect(() => {
  setDelay(data[current].duration)
}, [current]);

return (
  <div className="relative">
    <Carousel
      setApi={setApi}
      opts={{loop: true, align: 'center'}}
      plugins={[
        Autoplay({
          delay: delay,
          jump: false,
          stopOnInteraction: false,
        }),
      ]}
    >
      <CarouselContent>
        {data?.map((item, index) => (
          <CarouselItem key={index} className="xl:basis-[70%]">
            <AspectRatio ratio={6 / 2}>
              <div className="w-full h-full flex items-center">
                <Image
                  className="rounded-md"
                  src={item.imageWeb || ''}
                  alt={''}
                  width={5000} height={1000}
                />
              </div>
            </AspectRation>
          </CarouselItem>
        )}
      </CarouselContent>
      <div className="absolute bottom-0 right-0 m-5 md:flex gap-1 hidden">
        <CarouselAutoPlay/>
        <CarouselPrevious/>
        <CarouselNext/>
      </div>
    </Carousel>
  </div>
)

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[sarussss]

Hi @ezanglo
You can check it #743

[davidjerleke]

Thanks @sarussss! @ezanglo this feature is on the roadmap but not implemented yet:

• [Feat]: ⭐ Roadmap #841

[ezanglo]

Thank you for your answers, but i dont think i fully understand this, how will those fix the issue?

For context, setting the delay like my code works, it goes to the next slide after different delay, my only problem is the slide animation not working if there are different delay on each slide. Is this because the carousel gets init everytime it changes?

[davidjerleke]

@ezanglo as I already said in my previous comment: The feature is on the roadmap, meaning it hasn’t been implemented yet. Which also means it’s not supported at the time of writing.

Changing delay like that now will reset the carousel because it will detect changes on the plugin.

[ezanglo]

Thank you! I just thought of a workaround, basically let the slide animation finish then set the delay. Was able to achieve this by using the "scroll" and "settled" event.

For anyone who have the same issues:

on my custom hook:

const [isScrolling, setIsScrolling] = useState(false);

useEffect(() => {
  api.on('scroll', () => {
    setIsScrolling(true);
  })
  api.on('settle', () => {
    setIsScrolling(false);
  })
}, [api]);

then to set delay

useEffect(() => {
  !isScrolling && setDelay(data[current].duration)
}, [current, isScrolling]);

[davidjerleke]

@ezanglo thanks for sharing your solution.