Practical Guides
Here's a collection of practical, step-by-step guides to help you achieve specific goals. They show how to customize your carousels for different use cases while giving you a deeper understanding of how Embla Carousel works.
Pick a guide
How Embla Carousel Works
Learn how Embla Carousel applies minimal DOM manipulation to create smooth, performant scrolling.
Read moreRequired Setup
The minimal HTML and CSS structure you need to initialize and use Embla Carousel.
Read moreSlide Sizes
Learn how Embla Carousel calculates and customizes slide sizes using CSS.
Read moreSlide Gaps
Learn how to add spacing between slides in Embla Carousel using CSS.
Read moreAlignments
This guide shows you how to control and customize carousel alignment in Embla Carousel.
Read moreGrouping Slides
This guide shows you how to control and customize carousel slide grouping in Embla Carousel.
Read morePrev & Next Buttons
This guide explains how to add and customize previous and next navigation buttons in Embla Carousel.
Read moreDot Buttons
This guide explains how to add and customize dot navigation buttons in Embla Carousel.
Read moreServer-Side Rendering
This guide explains how to configure Embla Carousel for server-side rendering (SSR) environments.
Read more