[Feat]: Autoplay - Delay between transitions per slide

[SergkeiM]

Which variants of Embla Carousel are relevant to this feature request?

• 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)

Feature description

• PR: [Feat]: Autoplay - Delay between transitions per slide + Possibility to create a progress bar #1062.

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.

[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?

[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

[davidjerleke]

This has been added to the roadmap:

• [Feat]: ⭐ Roadmap #841

[davidjerleke]

@SergkeiM and @sarussss this feature is available from v8.5.0 and up. See the docs.

[SergkeiM]

Hi @davidjerleke

I'm testing this, out.

This is my config:

const plugins = computed(() => props.autoplay ? [Autoplay({
        delay: (snapList, emblaApi) => slides.value?.map(({ delay }) => (delay || 7) * 1000),
        jump: false,
        playOnInit: true,
        stopOnLastSnap: false,
        stopOnInteraction: false,
        stopOnMouseEnter: false,
        stopOnFocusIn: false
})] : []);

And everything works fine except:

Lets say the slide has 7000ms (7s) and you click next on 5th second (api.scrollNext()), the next slide will be shown for 2 seconds and slide again.

[davidjerleke]

@SergkeiM in your scroll next function you should also call reset, like this:

function myScrollNext() {
  emblaApi.plugins().autoplay.reset()
  emblaApi.scrollNext()
}

Feel free to check the autoplay example out in the docs.

[SergkeiM]

Hi @davidjerleke

Understood, wouldn't be more sense, to reset the autplay behind the scenes on slide change?

[davidjerleke]

@SergkeiM the current approach is more flexible because it allows for both behaviors.

Additionally, I think it’s easier to maintain when the plugin code is separated from the Embla core code. If I start adding many ifs and buts in the core library code that’s related to plugins, the code will be hard to follow and the bundle size of the core library would grow significantly (imagine conditions for all plugins), which would affect many users that don’t use the relevant plugins.

I hope that makes sense.

[SergkeiM]

@SergkeiM the current approach is more flexible because it allows for both behaviors.

Additionally, I think it’s easier to maintain when the plugin code is separated from the Embla core code. If I start adding many ifs and buts in the core library code that’s related to plugins, the code will be hard to follow and the bundle size of the core library would grow significantly (imagine conditions for all plugins), which would affect many users that don’t use the relevant plugins.

I hope that makes sense.

Hi @davidjerleke

Thank you, makes sense from this POV.