Couldnt implement Autoplay delay in ReactJs

[Khendrickthe5th]

First of all, I would like to thank the creator of this package, I'm really grateful and appreciate you for taking out your time and creating such a wonderful tool, Big ups to you.
I'm pretty new to ReactJs, I'm creating a movie app, and I need a carousel for a banner to display Current top rated movies, I need them to be on Auto play with Atleast 5s delay for each slide.
I have succeed in getting the slides working, but I cant figure out how to make the delays work for me. I have read the embla docs line by line but dont seem to know where the problem is stemming from.
i have scoured YT, SO, Google and Reddit but found no solution, i had no option than to bring it here, Please someone help me pinpoint what the issue may be, Thank you

Below is my code, my banner component

import Autoplay  from 'embla-carousel-autoplay';
import React from 'react';
import '../index.css';



function Banner(){

    const autoplayOptions = {
        delay: 1000,
        playOnInit: true,
        stopOnInteraction: true,
        stopOnMouseEnter: true
    }

const [emblaRef] = useEmblaCarousel(
    {loop: true, speed: 1},
    [Autoplay(autoplayOptions)]
);



return(
<div className='embla' >
    <div className="embla__viewport" ref={emblaRef}>
    <div className="embla__container font-custom2">
    <div className="embla__slide text-5xl text-center p-6">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis, nobis.</div>
    <div className="embla__slide">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis, nobis.</div>
    <div className="embla__slide">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis, nobis.</div>
    </div>
    </div>
</div>
)
}

export default Banner;```

[davidjerleke]

Hi @Khendrickthe5th,

Have you tried passing the autoplay options directly as demonstrated here? Please click on the react tab to see the react way.

Best,
David

[Khendrickthe5th]

Thanks a million for responding.
I tried using the constructor method you recommended, well at first, it seemed as if nothing changed; the slides wasn't slowing down for a delay.
After going through my code again, I decided to just increase my delay duration and see what might happen, after i did, there was a change, but not what i intended. The slides were slowing down prematurely without even reaching to the end, i guess the 5seconds delay i added started reading somewhere in the middle of the slides movement before even reaching the end to commence the delay time.

I have decided to recreate the issue in Codesandbox, as this will better explain my issue.
Here is a link to a ReactJs App i created to show the issue Codesandbox Link.
Thank you

[davidjerleke]

Hi @Khendrickthe5th,

You haven’t added any CSS to your carousel? It won’t work without the crucial CSS needed. This isn’t a bug with Embla but rather a case about guidance.

Please follow this guide in the documentation thoroughly and you will have a working carousel.

Alternatively, you can see a full working example here and fork the CodeSandbox.

Best,
David

[Khendrickthe5th]

I'm very sorry about that, I actually included the CSS styles but for some reason it wasn't saved to the project, Probably a internet network thing here.
I have updated it and added the required major styles and even reduced the delay to 4seconds as the issue is more visible with that duration.
Now you can take a look at it and see it

[davidjerleke]

@Khendrickthe5th, thank you for the additional details.
I would suggest you to check out the docs more. It’s always the best place to start:

Here’s the difference:

• speed option is how fast the carousel scrolls. You’re setting a very very low scroll speed which is causing the confusion. ⚠️ Note that this is the carousel options and not autoplay options.

• delay is the autoplay timer - Meaning how often the autoplay plugin will trigger a slide change. It has nothing to do with how fast the carousel scrolls.

I hope this helps.

Best,
David

[Khendrickthe5th]

Ohhh, yeahhh I just got it. Its now working.
Setting the carousel speed lower than the Auto play's delay was the culprit here.
Thank you for helping me out, I really appreciate it a lot, especially your swift replies, damnnn
God bless