--- 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: ```javascript $('.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: specifies how long to wait in miliseconds before going to the next slide. * pause: if set to false, the carousel will not pause when the mouse hovers over it. * ride: if set to true, the carousel autoplays after the user clicks through the first slide. * wrap: if set to false, the carousel pauses at the last item. ## Additional Details - [Bootstrap Carousel](https://getbootstrap.com/docs/4.1/components/carousel/)