[Help]: Delay between transitions per slide

[SergkeiM]

Summary

When using autoplay there is a posibility to set delay between transitions per slide.

I'm trying to change this delay per slide for example (first number is the index of the array of slides | HTMLElement[]):

0 - 7000,
1 - 4000,
2 - 7000,
3 - 10000

I've tried to put AutoPlay into a watchEffect

watchEffect(() => {
        autoplay?.destroy()
        autoplay = null 

        if(props.autoplay){
            autoplay = Autoplay({
                delay: props.delay,
                jump: false,
                playOnInit: true,
                stopOnLastSnap: false,
                stopOnInteraction: false,
                stopOnMouseEnter: false,
                stopOnFocusIn: false
            })
        }

        mergedPlugins.value = [...props.plugins, autoplay].filter(el => !isNull(el))
    })

This doesn't work because util function arePluginsEqual returns always true as number of plugins didn't change.

I've also tried to reInit but this resets the carousel to first slide, I could record the current slide index before that and set it in reinit.

@davidjerleke Is there is a way to set a different delay per slide, without all this manipulation?

P.S. Thank you for your work.

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-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi @SergkeiM,

When using autoplay there is a posibility to set delay between transitions per slide.

Thanks for your question. At the time of writing, the Autoplay plugin doesn't support this feature.

Best,
David

[SergkeiM]

Hi @davidjerleke

Any workaround you can suggest?

[davidjerleke]

@SergkeiM not anything that comes to mind other than stopping autoplay on every select event and run play again manually:

emblaApi.value.on('select', (emblaApi) => {
  const { autoplay } = emblaApi.value.plugins()
  const currentIndex = emblaApi.selectedScrollSnap() // use this index to determine what delay you want for the next index
  autoplay.stop() // stop autoplay
  autoplay.start() // start this with a timer but be sure to include the current delay in your calculation
})

Cumbersome but that's the only way I can think of right now.

Best,
David

[SergkeiM]

Thank you @davidjerleke hope you can add this feature in the future.

[davidjerleke]

@SergkeiM I’m hoping that too! I have a clear picture of how but I also have a big todo list so let’s see when I get the chance to add the feature!

[SergkeiM]

Hi @davidjerleke if you can share how you picture it I can create a PR, to help you out.

Note: Maybe is a good idea (if not already done) share your todolist in milestones, I'm sure people will help you out, the carousel is amazing.

[sarussss]

Hi @davidjerleke
Oh, in the past, I updated the autoplay plugin to support a feature similar to this, can I put it on git for everyone to use?
Demo