Angular Carousel Component
Angular Carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
How it works
The Angular carousel is a slideshow for cycling within a group of content. It runs with a group of images, text,or html elements. It also incorporates support for previous/next buttons.
In browsers where thePage Visibility APIopen in a new windowopen in new window 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).
Example
Carousels don't automatically normalize slide dimensions. As such, you may want to use extra utilities orcustom methods to properly size content. While carousels support previous/next controls and indicators,they're not explicitly expected. Add and customize as you see fit.
Slides only
With controls
Adding in the previous and next controls withc-carousel-controls component.
With indicators
You can attach the indicators to the carousel, lengthwise the controls, too.
With captions
You can add captions to slides with the<c-carousel-caption> element within any<c-carousel-item>. They can be immediately hidden on smaller viewports, as shown below, with optional [display utilities](https://coreui.io/docs/utilities/display) We hide them with.d-none and draw them back on medium-sized devices with.d-md-block.
First slide
Nulla vitae elit libero, a pharetra augue mollis interdum.
Crossfade
Addtransition="crossfade" to your carousel to animate slides with a fade transition instead of a slide.
Dark variant
Adddark property to thec-carousel for darker controls, indicators, and captions. Controls have been inverted from their default white fill with thefilter CSS property. Captions and controls have additional Sass variables that customize thecolor andbackground-color.
First slide
Nulla vitae elit libero, a pharetra augue mollis interdum.
API reference
CarouselModule
import { CarouselModule } from '@coreui/angular';@NgModule({ imports: [CarouselModule,]})export class AppModule() { }c-carousel
component
Inputs
| prop | description | type | default | notes |
|---|---|---|---|---|
activeIndex | Index of the active item | number | 0 | |
animate | Carousel automatically starts cycle items | boolean | true | |
dark | Add darker controls, indicators, and captions | boolean | undefined | |
direction | Carousel direction | next, prev | next | |
interval | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle | number | 0 | |
pause | hover pauses the cycling of the carousel onmouseenter and resumes onmouseleave. When set tofalse, hovering won't pause | hover | false | hover | |
touch | Support left/right swipe interactions on touchscreen devices. | boolean | true | |
transition | Type of the transition | slide, crossfade | slide | |
wrap | Set whether the carousel should cycle continuously or have hard stops | boolean | true |
Outputs
| prop | description | type | notes |
|---|---|---|---|
itemChange | Event emitted on carousel item change | number |
c-carousel-caption
component
c-carousel-control
component
Inputs
| prop | description | type | default | notes |
|---|---|---|---|---|
caption | Carousel control caption | string | 0 | |
direction | Carousel control direction | prev, next | next |
c-carousel-indicators
component
c-carousel-inner
component
c-carousel-item
component
Inputs
| prop | description | type | default | notes |
|---|---|---|---|---|
interval | Time delay before cycling to next item. If -1, uses carousel interval value. | number | -1 |