Angular Carousel Slide only

Here’s a carousel with slides

@for (slide of slides[0]; track slide.src) { {{slide.title}}

}

Angular Carousel with controls

Adding in the previous and next controls with c-carousel-controls component.

@for (slide of slides[0]; track slide.src) { {{slide.title}}

}

Angular Carousel with custom controls

Adding in the previous and next controls with custom content of c-carousel-controls component.

@for (slide of slides[0]; track slide.src) { {{slide.title}}

}

Angular Carousel with indicators

You can attach the indicators to the carousel, lengthwise the controls, too.

@for (slide of slides[0]; track slide.src) { {{slide.title}}

}

Carousel with captions, controls and indicators

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. We hide them with .d-none and draw them back on medium-sized devices with .d-md-block.

@for (slide of slides[1]; track slide.src) { {{slide.title}}

}

Angular Carousel Crossfade

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

@for (slide of slides[0]; track slide.src) { {{slide.title}}

}

Angular Carousel 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.

@for (slide of slides[2]; track slide.src) { {{slide.title}}

}

{{ slide.title }}

{{ slide.title }}

{{ slide.title }}