On this page

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 the [Page Visibility API](https://www.w3.org/TR/page-visibility/) open 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 or custom 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 with `c-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.

### Crossfade Add `transition="crossfade"` to your carousel to animate slides with a fade transition instead of a slide.

## Dark variant

Add dark property to the c-carousel for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the filter CSS property. Captions and controls have additional Sass variables that customize the color and background-color.

--- ## API reference ### CarouselModule

 ```typescript
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 on `mouseenter` and resumes on `mouseleave`. When set to `false`, 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_|