[Help]: React + shadcn: How to control autoplay outside component with carousel.

[DawidSmuga]

Summary

I'm using this carousel with React.js and a shadcn wrapper - my question is, how to control carousel autoplay in other component?

example: in app.tsx i have carousel, when I click on carousel item modal appears and now in this modal component I want to control carousel, on modal render stop autoplay, on close start autoplay.

I already try put api to context, but it's not working at all or I might be doing something wrong.

                <Carousel 
                    setApi={setApi} // pass function to set api in context, but when i tried to use it in other component nothing works
                    opts={{ loop: true }}
                    className="w-full"
                    plugins={[
                        Autoplay({
                            delay: 4000,
                            stopOnMouseEnter: true,
                            stopOnFocusIn: true,
                            stopOnInteraction: false,
                        }),
                    ]}
                 >
                    <CarouselContent>
                        {products.map((item) => (
                            <CarouselItem
                                key={item.id}
                                className="basis-1/2 sm:basis-1/3 lg:basis-1/4 xl:basis-1/4 2xl:basis-1/5"
                            >
                               <ProductCard item={item}/> // this element has onClick event
                            </CarouselItem>
                        ))}
                    </CarouselContent>
                </Carousel>

If you know solution, but without shadcn it's fine, it will be helpful too.

Thanks for help.

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

[DawidSmuga]

    const { carouselAutoplayState } =
        useCarouselsAutoplayStore();

    const autoplayPluginOptions = {
        delay: 4000,
        stopOnMouseEnter: true,
        stopOnFocusIn: true,
        stopOnInteraction: false,
    };

    const [autoplayPlugin, setAutoplayPlugin] = useState<[AutoplayType] | []>([
        Autoplay(autoplayPluginOptions),
    ]);

    useEffect(() => {
        if (carouselAutoplayState) {
            setAutoplayPlugin([Autoplay(autoplayPluginOptions)]);
        } else {
            setAutoplayPlugin([]);
        }
    }, [carouselAutoplayState]);

Than set autoplayPlugin in Carousel plugins prop.

In context I control autoplay is true/false and change plugins - ugly solution, but working.

I did this way, but I don't think so it's correct one.

[Enkratia]

"React.createContext" is essential for components communication, if you don't use redux/zustand.

Looks like "embla" doesn't have "stop" property for "autoplayPlugin", just have "stop"/"play" methods. So the best solution is what you have done already.

As alternative you can use stop()/play() methods, instead of setAutoplayPlugin([Autoplay(autoplayPluginOptions)])/setAutoplayPlugin([]);

https://www.embla-carousel.com/plugins/autoplay/#example

[DawidSmuga]

When I tried to use methods stop/play on Autoplay instance unfortunately it didn't work :(

This is reason why I clear array of plugins.

Thanks for reply!

[davidjerleke]

@DawidSmuga I would store the emblaApi in the context and then you can control Autoplay like so:

emblaApi.plugins().autoplay?.play();

emblaApi.plugins().autoplay?.stop();

// ...and so on.

[davidjerleke]

@DawidSmuga did you solve this?