Carousel (Slider) component on Bootstrap
Tags: beginners, frontend, webdev, css
Published: 2020-05-21 09:56:14



Hello everyone!

Since I worked (and struggled) with Bootstrap carousel component, I wanted to explain the process to understand each part of it, so, let's go.

I built a carousel inside a modal, another Bootstrap component which I tackle in [this post](https://dev.to/albertoroldanq/modal-component-on-bootstrap-2o5d). Actually, I built two of them, one inside the other.

#### Choose the carousel
Pick the carousel you want to add to your code from [Bootstrap Documentation section](https://getbootstrap.com/docs/4.5/components/carousel/)
In this example, we will work with the third (with indicators). 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fznlhfr1428y5355evtq.png)
The example showed is a grid of pictures, but this won't change the main code to make the carousel work, then we can customise it with the structure we want.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ee8itne9cc602w4bcesl.png)

The opening `div` contains all the elements that make the carousel. 
- `id` will help the slider controls work.
- `data-ride` value triggers the autoplay if set to "carousel", by default is false.
- `data-interval`  sets the time an item is displayed until it slides to the next one.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v0l4w85maf36k7c1u2a5.png)

The extra `div` which don't appear in the Bootstrap Documentation is just to keep the desired structure.

The `div` that contains `class="carousel-item"` will be also where we set the `.active` item. Only one can be set with the active class. If more than one item is set to active it won't work properly.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vuths9xsyiv3k5tctsne.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4pgrsgmm53aeapa6dgu2.png)

The `<a>` element included in the carousel is a button that pops-up another [modal with another carousel](https://dev.to/albertoroldanq/modal-component-on-bootstrap-2o5d)
Finally, the custom content to display in the first carousel's `item`. Then we only need to create as many items as we want, which will be displayed every time the slide moves through the controls or the `data-ride` and `data-interval`

#### Slider Controls
Remember to insert the `id`  assigned to the carousel on the `href` value.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ww1cm2re7xev4fm4pqc3.png)

**We need to add as many indicators `li` as items are in the carousel**, and with the same logic we used with the items, only one can be set with the `.active` class.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6d5ifvyt30sykltp2cqv.png)

**We can customise controls and indicators style** (position, shapes, colours, etc. in our CSS stylesheet. Let me know in the comments if you want to know how to customise the controls and indicators.

I hope to have helped you understand a little bit more the carousel component. If you want to know more about the modal component and how to display a modal inside another have a look at [this post](https://dev.to/albertoroldanq/modal-component-on-bootstrap-2o5d).

**If you are planning to look for a job [this list](https://dev.to/albertoroldanq/remote-jobs-sites-4hbf) of remote jobs sites could be a great resource!**

Don't forget to bookmark the post if it's useful.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qhukd68mdf1x0dko6xxf.png)

If you liked what you read.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/myvwcmge2y86d0fu149m.png)   

**Let's keep in touch:**
- **Follow me on [Instagram](https://www.instagram.com/albertoroldanq/)**
- **Add me to your contacts on [Linkedin](https://www.linkedin.com/in/albertoroldanq/)**

Thank you for reading! **Some feedback would be awesome!**
Leave a comment to share your thoughts, ask questions or just to say hello!