Carousel

A carousel allows users to cycle through a series of horizontally aligned content items, such as images or text.

API

API reference

import { BwcCarouselModule } from '@aviato/components/carousel';

Component

BwcCarousel

This component loads a series of slides (components) in a sliding carousel.

Directives

bwc-carousel - Wrapper component which holds the items
bwc-carousel-item - Carousel item which can be almost any type of component

Parameters

@Input()

config: BwcCarouselConfigType

BwcCarouselConfigType

Optional parameter: configuration options in Carousel.

Type: BwcCarouselConfigType

{ itemsPerSlide?: number // number of items displayed itemsToScroll?: number // number of items to scroll itemsPerSlideMobile?: number // number of items displayed on mobile itemsToScrollMobile?: number // number of items to scroll on mobile previousButtonAriaLabel?: string, // Aria label for previous button nextButtonAriaLabel?: string, // Aria label for next button previousButtonClickHandler?: () => void; // Previous button click callback nextButtonClickHandler?: () => void; // Next button click callback }

 


Examples

Non clickable items

Storybook failed to load. Please connect to the VPN to access.

Clickable items

Storybook failed to load. Please connect to the VPN to access.

Different length items

Storybook failed to load. Please connect to the VPN to access.

Dynamic items

Storybook failed to load. Please connect to the VPN to access.

Destination card

Storybook failed to load. Please connect to the VPN to access.