--- title: "Carousel UI: anatomy, variants and examples | Kombai" description: "A carousel shows a few items from a longer row at a time, and people swipe or click to bring the rest into view." canonical_url: https://kombai.com/glossary/carousel/ author: "The Kombai Team" --- # Carousel A carousel shows a few items from a longer row at a time, and people swipe or click to bring the rest into view. - Also called: slider, slideshow - Platforms: Web, Mobile - In the Kombai gallery: [111 web designs](https://kombai.com/gallery/web/carousel/), [30 mobile designs](https://kombai.com/gallery/mobile/carousel/) - [Sorrelwood](https://kombai.com/gallery/inspirations/carousel-web-32/) (Web) - [Halyard](https://kombai.com/gallery/inspirations/carousel-ios-1/) (Mobile) - [Foxglove](https://kombai.com/gallery/inspirations/carousel-web-12/) (Web) ## What is a carousel? A carousel is a horizontal row of slides, usually cards or images, with only a few in view at a time. People swipe, click an arrow or pick a dot to move the others into view. It fits a long set into the space of one row. - Arrows, dots or a slide cut off at the edge show that there is more. - Slides share one size and shape, so the row reads as one set. ## When to use carousel - **Optional browsing.** Picks, deals and related items that people may skim but do not need. - **Several photos of one thing.** Product and listing photos, one large image at a time. - **Short sequences.** Onboarding or feature tours of a few steps. ## When not to use one - **Content everyone must see.** Slides past the first are easy to miss. Put key messages on the page. - **Comparing items.** People can't compare what they can't see at once. Use a grid or a table. - **Banners that rotate on their own.** Moving slides pull attention and can change before people finish reading. ## Anatomy 1. **Viewport**: The window slides move through 2. **Slide**: One card, labeled "1 of 4" 3. **Arrows**: Previous and next 4. **Dots**: Position, and a way to jump 5. **States**: First, last, focus ## Variants We sorted every carousel design in the Kombai gallery and found six patterns. ### 1. Card rails with arrows A row of product or listing cards with arrow buttons above or beside it, cut off at the edge so the next card shows. - [Moraine](https://kombai.com/gallery/inspirations/carousel-web-18/) (Web) - [Meridian Lane](https://kombai.com/gallery/inspirations/carousel-web-7/) (Web) - [Barrowcliff](https://kombai.com/gallery/inspirations/carousel-web-109/) (Web) ### 2. Swipeable cards with dots One card fills most of the width, the next one peeks in, and page dots below show where you are. - [Bowline](https://kombai.com/gallery/inspirations/carousel-ios-2/) (Mobile) - [Yarrow](https://kombai.com/gallery/inspirations/carousel-ios-12/) (Mobile) - [Reedloom](https://kombai.com/gallery/inspirations/carousel-ios-25/) (Mobile) ### 3. Hero carousels One large slide at a time at the top of a home screen, often a show, a collection or a promotion with its own button. - [Moraine](https://kombai.com/gallery/inspirations/carousel-ios-7/) (Mobile) - [Bergamot](https://kombai.com/gallery/inspirations/carousel-ios-15/) (Mobile) - [Plumbline](https://kombai.com/gallery/inspirations/carousel-web-40/) (Web) ### 4. Product photo carousels Photos of one product or listing, one at a time, with arrows, dots or a strip of thumbnails to jump between them. - [Grosgrain](https://kombai.com/gallery/inspirations/carousel-web-13/) (Web) - [Bouclé Market](https://kombai.com/gallery/inspirations/carousel-ios-21/) (Mobile) - [Macefold](https://kombai.com/gallery/inspirations/carousel-web-43/) (Web) ### 5. Onboarding and feature tours A few slides that each explain one thing, with a progress bar or dots and a button to move on. - [Heddle](https://kombai.com/gallery/inspirations/carousel-ios-22/) (Mobile) - [Lehrline](https://kombai.com/gallery/inspirations/carousel-web-37/) (Web) - [Firnline](https://kombai.com/gallery/inspirations/carousel-ios-10/) (Mobile) ### 6. Stories A row of round avatars that opens a full-screen viewer, stepping through posts with a progress bar on top. - [Platemark](https://kombai.com/gallery/inspirations/carousel-web-20/) (Web) - [Wadeline](https://kombai.com/gallery/inspirations/carousel-web-24/) (Web) - [Cirqueline](https://kombai.com/gallery/inspirations/carousel-web-33/) (Web) ## Where carousels show up ### Deals and recommendations Rows of deals and picks on store and travel home screens, each with a See all link to the full list. - [Quernway](https://kombai.com/gallery/inspirations/carousel-web-50/) (Web) - [Larkspur London](https://kombai.com/gallery/inspirations/carousel-web-110/) (Web) - [Apsis](https://kombai.com/gallery/inspirations/carousel-ios-17/) (Mobile) ### Media libraries Music, meditation and audio apps stack one rail per row: picks for you, new releases and ranked charts. - [Quietide](https://kombai.com/gallery/inspirations/carousel-web-60/) (Web) - [Kittiwake](https://kombai.com/gallery/inspirations/carousel-ios-5/) (Mobile) - [Halcyon](https://kombai.com/gallery/inspirations/carousel-web-102/) (Web) ### Setup steps Onboarding tasks on a dashboard, one card per step, with progress so people see what is left. - [Quadrat](https://kombai.com/gallery/inspirations/carousel-web-5/) (Web) - [Grainloft](https://kombai.com/gallery/inspirations/carousel-web-49/) (Web) - [Quillbook](https://kombai.com/gallery/inspirations/carousel-web-52/) (Web) ## Carousel vs similar components | | [Carousel](https://kombai.com/glossary/carousel/) | [Gallery](https://kombai.com/glossary/gallery/) | [Tabs](https://kombai.com/glossary/tabs/) | |---|---|---|---| | Shows | A few items, the rest off screen | Every item at once | One panel at a time | | Moves by | Swipe, arrows or dots | Scrolling the page | Choosing a tab | | Best for | A short, optional set to browse | Browsing many images | Switching between peer views | ## Build notes - Give the container aria-roledescription="carousel" and a label. Each slide is role="group" with aria-roledescription="slide". - Label slides by position, like "2 of 4", when they have no names of their own. - Announce slide changes with aria-live="polite" when the carousel does not rotate on its own. - If it rotates, stop on hover and on keyboard focus, and put a pause button first in the tab order. - Make Previous, Next and each dot a real