--- 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/)