Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Examples#
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
- Web Component
- React
- Angular
<uxf-carousel controls indicators> <uxf-carousel-item active> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </uxf-carousel-item></uxf-carousel><UxfCarousel controls indicators> <UxfCarouselItem active> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </UxfCarouselItem> <UxfCarouselItem> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </UxfCarouselItem> <UxfCarouselItem> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </UxfCarouselItem></UxfCarousel><uxf-carousel controls indicators> <uxf-carousel-item active> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </uxf-carousel-item></uxf-carousel>Crossfade#
Add fade to your carousel to animate slides with a fade transition instead of a slide.
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
- Web Component
- React
- Angular
<uxf-carousel controls indicators fade> <uxf-carousel-item active> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </uxf-carousel-item></uxf-carousel><UxfCarousel controls indicators fade> <UxfCarouselItem active> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </UxfCarouselItem> <UxfCarouselItem> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </UxfCarouselItem> <UxfCarouselItem> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </UxfCarouselItem></UxfCarousel><uxf-carousel controls indicators fade> <uxf-carousel-item active> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </uxf-carousel-item></uxf-carousel>Dark variant#
Add dark to the Carousel for darker controls, indicators, and captions.
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
- Web Component
- React
- Angular
<uxf-carousel controls indicators dark> <uxf-carousel-item active> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </uxf-carousel-item></uxf-carousel><UxfCarousel controls indicators dark> <UxfCarouselItem active> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </UxfCarouselItem> <UxfCarouselItem> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </UxfCarouselItem> <UxfCarouselItem> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </UxfCarouselItem></UxfCarousel><uxf-carousel controls indicators dark> <uxf-carousel-item active> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </uxf-carousel-item></uxf-carousel>Individual Item Intervals#
You can specify individual intervals for each carousel item via the interval prop.
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
- Web Component
- React
- Angular
<uxf-carousel controls indicators> <uxf-carousel-item active interval="2500"> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item interval="1000"> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </uxf-carousel-item></uxf-carousel><UxfCarousel controls indicators> <UxfCarouselItem active interval="2500"> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </UxfCarouselItem> <UxfCarouselItem interval="1000"> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </UxfCarouselItem> <UxfCarouselItem> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" className="d-block w-100" alt="..." /> <div className="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </UxfCarouselItem></UxfCarousel><uxf-carousel controls indicators> <uxf-carousel-item active interval="2500"> <img src="https://images.unsplash.com/photo-1558793351-16b18a9b3c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item interval="1000"> <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </uxf-carousel-item> <uxf-carousel-item> <img src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </uxf-carousel-item></uxf-carousel>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
controls | controls | Adds arrow buttons for sliding through the carousel. | boolean | false |
dark | dark | Change the color on controls, indicators, and captions to a darker variant. | boolean | false |
keyboard | keyboard | Whether the carousel should react to keyboard events. | boolean | true |
fade | fade | Animate slides with a fade transition instead of a slide. | boolean | false |
indicators | indicators | Adds indicators for sliding through the carousel. | boolean | false |
interval | interval | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | string | "5000" |
pause | pause | If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. | string | "hover" |
ride | ride | Autoplays the carousel after the user manually cycles the first item. If set to 'carousel', autoplays the carousel on load. | boolean | string | "carousel" |
active | active | Needs to be added to one of the carousel-items otherwise the carousel will not be visible. | boolean |
Events#
| Event | Description | Type |
|---|---|---|
slidCarousel | CustomEvent<any> | |
slideCarousel | CustomEvent<any> |