ng-bootstrap HomeBasicAlertFormsFloating labelsInput groupMulti-rangeRangeSelectRadioCheckboxDatepickerTimepickerDateTime pickerContainersGridCardTab controlRatingBadgeBreadcrumbButton groupButton typeCalendarMarqueeList groupTreeviewTree selectTableClosePaginationPlaceholderSpinnerColor pickerProgress barFor directiveIconOverlaysModalsOffcanvasTooltipToastPopoverDropdownTypeaheadContext menuShellDropdown menu (WC)AdvancedCopyCode snippetPipesTrust-htmlSplit-stringLinifySlugifyWord-countFont-colorHas-propertyToggle buttonsSticky footerAutofocusTrackByAsync HostBindingInstance ofIs interfaceResizableOrdinal numbersMarkdownParallaxPriority navigationScrollspyFile uploadSignature padLazy-loading componentsUser-agentNavigation lockNavigation lock (master/detail)EnterpriseCarouselSchedulerTimelineDockRibbonTile managerDatatablesFile managerQuery builderOTP inputNavbarSplitterAccordionAnimationsSlide up/downFade in/outColor transitionAdditional samplesCollapseFocusTrapDrag-dropTree-select drag-dropQR-code viewerStepperThemingAnchor scrollingSection 1Section 2Section 3Section 4Section 522.6.0

Carousel

bs-carousel wraps the framework-agnostic <mp-carousel> web component: slides are plain child elements, with optional indicators, auto-advance, slide/fade animation in both orientations, touch swipe, keyboard + reduced-motion support, and a radio-driven no-JS tier (server-rendered pages keep navigating with JavaScript disabled).

Basic usage

Demo

A deerA duckA leopardA lionA peacockA tiger
Carousel mode
Orientation

Features

  • Touch-event support
  • <noscript> support (interactive: indicators, prev/next with wrap-around, radiogroup arrow keys)
  • Full APG carousel ARIA pattern

Without JavaScript (server-rendered)

Two independent carousels: with JS disabled each keeps its own radio-driven state (indicators + prev/next + keyboard), proving instances don't collide.

A deerA duckA leopardA lionA peacockA tiger

Nested carousels

A horizontal carousel as a slide of a vertical one: the inner claims horizontal swipes, vertical swipes bubble to the outer, and each viewport keeps its own arrow keys.

A deer
A duckA leopard
A lion