Carousel

A carousel with motion and swipe built on top of Embla.

Default

The standard carousel component.

1

2

3

4

5

Orientation

Use the orientation input to set the carousel to vertical.

1

2

3

4

5

Sizes

Carousels support different sizes through the slides inside them.

1

2

3

4

5

Slide Count

Display the current slide and total count using hlm-carousel-slide-display.

1

2

3

4

5

Slide 1 of 0 is displayed

Autoplay with Images

Automatically rotate through slides using the autoplay plugin and display images.

Carousel Image
Carousel Image
Carousel Image
Carousel Image
Carousel Image

Installation & Usage

Installation

Imports

Basic Skeleton

API Reference

Brain API

Core functionality and state management for the carousel.

DirectiveSelectorInputs / Outputs
BrnCarouselhlm-carousel, [brnCarousel]
  • orientation: 'horizontal' | 'vertical'
  • plugins: EmblaPluginType[]
  • options: EmblaOptionsType

Helm API

Styling and UI components for the carousel.

ComponentSelectorDescription
HlmCarouselhlm-carouselThe default styled carousel container.
HlmCarouselContenthlm-carousel-contentWrapper for the carousel slides.
HlmCarouselItemhlm-carousel-itemA single slide in the carousel.
HlmCarouselPreviousbutton[hlm-carousel-previous]Button to go to the previous slide.
HlmCarouselNextbutton[hlm-carousel-next]Button to go to the next slide.
HlmCarouselSlideDisplayhlm-carousel-slide-displayComponent to display current slide count.