[Help]: Does using multiple sliders reduce a website's performance?

[notrealdev]

Summary

Hi, I am developing a website similar to calvin. I plan to use Embla, which might be feasible, but I’m concerned about potential performance issues.

What do you guys think about this if I have thousands of products? Each product item will have a slider.

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

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• 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

[meirroth]

@notrealdev We've got many sliders on our homepage and performance is fine. Lazy loading slides helps!

[notrealdev]

Hi @meirroth can you share your website? I'm just curious to see it live.

[meirroth]

Sure: https://torahlive.com/ Each category row is another slider.

[notrealdev]

The website is very nice. I see that, thank you!

[meirroth]

@notrealdev Thanks! 😃
Essentially, try to reduce number of DOM elements on the page. Only rendering what's visible.

[davidjerleke]

@notrealdev Just to add to the conversation — you can also lazy load entire carousels and unmount them when they leave the viewport.