Oh My Etch
Buy Now
ComponentsFacetsWooPatterns
IDEtch
IDEtch StarterIDEtch MCP
Stripe-like navigationFacet SystemMap FacetWoo Store
DocsPricingMy accountBuy Now
UI COMPONENTS / Carousel

Carousel. make it glide.

Touch-friendly carousels with arrows, dots, effects, and composable slide content.

Get lifetime accessRead docs

Root + 4 atoms / Accessible / Composable

Carousel · runtimeATOMIC

Looping preview · touch swipe + dots

Why it's good

Behavior, handled.

Carousel owns the parts that are tedious and easy to get wrong – so you can focus on the layout and the brand.

  • Swiper-powered runtime
  • Dots and remote arrows
  • Autoplay and effects options
  • Slots keep slide markup yours
Compositions

Carousel becomes patterns.

Different structures made from the same atoms.

Synced galleryATOMIC
  • Gallery
    • Carouselroot
      • Carousel Slideslot
      • Carouselroot
        • Carousel Slideslot

      Synced gallery

      Gallery 2 composes two Carousel roots with Carousel Slide children so a secondary carousel can sync with the main one.

      Gallery 2
      Quote + author stripATOMIC
      • Testimonials
        • Carouselroot
          • Carousel Slideslot
          • Carouselroot
            • Carousel Slideslot
            • Carousel Previous Buttonbtn
              • Carousel Dotsatom
                • Carousel Next Buttonbtn

                Quote + author strip

                Testimonial 1 uses two Carousel roots plus Carousel Previous Button, Carousel Dots, and Carousel Next Button controls.

                Testimonial 1
                Hero background rotatorATOMIC
                • Hero
                  • Carouselroot
                    • Carousel Slideslot
                      • Carousel Dotsatom
                        • Carousel Next Buttonbtn

                      Hero background rotator

                      Hero 30 keeps the hero media inside Carousel Slide and adds Carousel Dots plus Carousel Next Button.

                      Hero 30
                      Best stacks

                      Compose it.

                      A few ways Carousel shows up in real builds.

                      01

                      Product gallery

                      Gallery slides with synced thumbnails and a lightbox.

                      CarouselLightbox
                      More UI Components

                      The rest of the family.

                      Accordion

                      Expandable sections with keyboard nav, ARIA, and animated panels.

                      i-layers / Root + 4 atomsView family

                      Tabs

                      Tabbed panels with an optional responsive accordion fallback.

                      i-columns / Root + 4 atomsView family

                      Dialog

                      Focus-trapped modal overlays with title, description, and close.

                      i-frame / Root + 5 atomsView family
                      See all UI Components
                      Ready?

                      Stop rebuilding Carousel.

                      See pricingRead the docs