# Carousel
[component-header:sl-carousel]
Carousels consist of optional navigation arrows to go backwards and forwards, as well as optional pagination indicators.
```html preview
Loop
Show navigation
Show pagination
Autoplay (3s)
Mouse dragging
Horizontal
Vertical
```
## Examples
### Multiple slides per view
Setting the attribute `slides-per-view` is it possible to specify how many items are shown at a given time.
Using this feature, it may be also useful to advance multiple slides at once, even though not strictly necessary.
This can be done by using the `slides-per-move` attribute.
```html preview
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
```
### Adding/removing slides
The content of the carousel can be changed by either appending or removing items, the carousel will update itself automatically.
```html preview
Slide 1
Slide 2
Slide 3
Add slide
Remove slide
```
### Vertical scrolling
Setting the `orientation` attribute to `vertical`, will make the carousel laying out vertically, making it
possible for the user to scroll it up and down. In case of heterogeneous content, for example images of different sizes,
it's important to specify a predefined height to the carousel through CSS.
```html preview
```
### Aspect ratio
Use the `--aspect-ratio` custom property to customize the size of viewport in order to make it match a particular aspect ratio.
```html preview
1 / 1
3 / 2
16 / 9
```
### Scroll hint
Use `--scroll-padding` to add inline padding in horizontal carousels and block padding in vertical carousels.
Setting a padding, will make the closest slides visible, suggesting to the user that there are items that can
be scrolled.
```html preview
```
### Custom layout
The appereance of the carousel can be easly customized through its slots or `part` attributes.
```html preview
```
### Gallery example
The carousel has a set of API with which is possible to interact programmatically, for example it is possible to
use `next()` or `previous()` to go respectively to the next or the previous slide.
When the active slide is changed, the `sl-slide-change` event is emitted providing the `index` of the slide.
Using the API is possible to extend the carousel, for exmaple by syncing the active slide with a set of thumbnails, like in the example below.
```html preview
```
[component-metadata:sl-carousel]