---
title: Carousel
---
## Carousel
Carousel is a slideshow component for cycling through elements like images or slides of text.
It provides a dynamic way of representing large amount of data (text or images) by sliding or cycling through, in a smooth fashion
Sample Code of Image Slider is below :
```html
```
Understanding the Attributes and classes used in above example :
### 1) Attributes
a) `data-ride` :- `data-ride ="carousel"` allows on page load animation to begin.
b) `data-target` :- It points to the id of the Carousel
c) `data-slide-to` :- It specifies which slide to move on to when clicking on the indicators(specific dots).
### 2) Classes
a) `carousel` :- `class="carousel"` specifies that the div contains carousel.
b) `slide` :- This class adds CSS transitions.
c) `carousel-inner` :- This denotes the section of code which will hold the text/image to be displayed in slides.
d) `item` :- It refers to the content to be displayed in the carousel.
e) `left carousal-control` :- This adds the back button allowing sliding to the previous slide.
f) `right carousal-control` :- This adds the next button allowing sliding to the next slide.
g) `carousel-caption` :- This class let you add captions to each slide.
Note: Add `class="carousel-caption"` for each item.
### Usage
#### 1) Via data attributes
The `data-ride="carousel"` attribute is used to mark a carousel as animating starting at page load.
`data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position.
#### 2) Via JavaScript
Call carousel manually with:
`$('.carousel').carousel()`
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`.
Some frequently used options are:
* interval
* pause
* ride
* wrap
## Additional Details
- [Bootstrap Carousel](https://getbootstrap.com/docs/4.0/components/carousel/)