--- title: Carousel desc: Carousel show images or content in a scrollable area. layout: components classnames: component: - class: carousel desc: Carousel container part: - class: carousel-item desc: Carousel item modifier: - class: carousel-start desc: Snap elements to start default: true - class: carousel-center desc: Snap elements to center - class: carousel-end desc: Snap elements to end direction: - class: carousel-horizontal desc: Horizontal layout (default) - class: carousel-vertical desc: Vertical layout --- ### ~Snap to start (default)

```html

``` ### ~Snap to center

```html

``` ### ~Snap to end

```html

``` ### ~Carousel with full width items

```html

``` ### ~Vertical carousel

```html

``` ### ~Carousel with half width items

```html

``` ### ~Full-bleed carousel

```html

``` ### ~Carousel with indicator buttons #### This slider works with anchor links so the browser will snap vertically to the image when you click buttons.

1 2 3 4

```html

1 2 3 4

``` ### ~Carousel with next/prev buttons #### This slider works with anchor links so the browser will snap vertically to the image when you click buttons.

❮ ❯

```html

❮ ❯

```