15+ Bootstrap Carousel & Slider Examples
Hello there! In this article, you will find 15+ Bootstrap Carousel & Slider designs with complete source code so you can copy and paste it into your project.
Before we get started, let’s take a quick look at what a Bootstrap carousel is. A carousel is a slideshow for cycling through a series of content built using CSS 3D transformations and a bit of JavaScript. Works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
Don’t know how to make a carousel? Don’t worry we’ve got you covered. We have Handpicked the best 15+ Bootstrap Carousel designs from the web for you to use in your project.
Let’s see some cool 15+ Bootstrap Carousel designs.
1. Bootstrap 3 Carousel New Control Positions
Code by | wolfgang1983 |
Demo & download | click here for code |
Language used | HTML, CSS, JS |
External link / Dependencies | Yes |
Responsive | Yes |
Let’s start our list with a very simple and basic Bootstrap carousel by wolfgang1983 made with pure HTML, CSS, and JavaScript.
2. Bootstrap Testimonial Slider Example 1
Code by | nikhil |
Demo & download | click here for code |
Language used | HTML, CSS |
External link / Dependencies | Yes |
Responsive | Yes |
In this minimal testimonial slider built by Nikhil on the top of the bootstrap carousel, the navigation dots have been changed to the faces of testimonial personalities.
3. Testimonials Carousel
Code by | Gabriel Toledo |
Demo & download | click here for code |
Language used | HTML,CSS(SCSS),JS |
External link / Dependencies | Yes |
Responsive | Yes |
Another testimonial carousel with a card-based layout is made by Gabriel Toledo using HTML, CSS(SCSS), and JavaScript.
4. Bootstrap Carousel Testimonials
Code by | Rick |
Demo & download | click here for code |
Language used | HTML, CSS |
External link / Dependencies | Yes |
Responsive | Yes |
Another one! this Bootstrap Testimonial carousel by Rick is using Bootstrap 4 carousel and blockquotes.
5. Full-Width Bootstrap Carousel
Code by | Matt Lambert |
Demo & download | click here for code |
Language used | HTML |
External link / Dependencies | Yes |
Responsive | Yes |
Full-Width Bootstrap Carousel designed by Matt Lambert using HTML.
Flashcards Using HTML, CSS, &JavaScript
6. Bootstrap Slider Full Screen with Animations
Code by | afmarchetti |
Demo & download | click here for code |
Language used | HTML, CSS |
External link / Dependencies | Yes |
Responsive | Yes |
Bootstrap Full-Screen carousel with animations by afmarchetti made with pure HTML and CSS.
7. Bootstrap Carousel 100% Fullscreen
ADVERTISEMENT
ADVERTISEMENT
Code by | Kathy Szczesny |
Demo & download | click here for code |
Language used | HTML,CSS(Less) |
External link / Dependencies | Yes |
Responsive | Yes |
Another full-screen Bootstrap carousel is designed and developed by Kathy Szczesny using HTML, and CSS(Less).
ADVERTISEMENT
8. Bootstrap4 Thumbnail-Carousel
ADVERTISEMENT
ADVERTISEMENT
Code by | aholics |
Demo & download | click here for code |
Language used | HTML,CSS(SCSS),JS |
External link / Dependencies | Yes |
Responsive | Yes |
A Bootstrap carousel by aholics to showcase products on e-commerce websites. This is made using HTML, CSS(SCSS), and JS.
9. Bootstrap 4 – Carousel with contents, outer controls
Code by | David |
Demo & download | click here for code |
Language used | HTML,CSS(SCSS) |
External link / Dependencies | Yes |
Responsive | Yes |
A Bootstrap carousel with other controls by David made with HTML, and CSS(SCSS).
10. Bootstrap 4 Carousel / Slider with Thumbnail Navigation
Code by | Morten Brunbjerg Bech |
Demo & download | click here for code |
Language used | HTML, CSS, JS |
External link / Dependencies | Yes |
Responsive | Yes |
A Bootstrap carousel that has thumbnail navigation, developed by Morten Brunbjerg Bech using pure HTML, CSS, and JavaScript.
RGB to hex and hex to RGB Converter using JavaScript
11. Bootstrap 4 Navbar with Slider
Code by | Divinector |
Demo & download | click here for code |
Language used | HTML, CSS |
External link / Dependencies | Yes |
Responsive | Yes |
A Carousel for homepages, designed by Divinector using HTML and CSS only. Additionally, it also has a drop-down menu.
12. Bootstrap 4 carousel multiple items per slide responsive
Code by | FrankieDoodie |
Demo & download | click here for code |
Language used | HTML,CSS |
External link / Dependencies | Yes |
Responsive | Yes |
This responsive Bootstrap carousel is made by FrankieDoodie using pure HTML and CSS.
13. Bootstrap Carousel Slider
Code by | Emran Khan |
Demo & download | click here for code |
Language used | HTML,CSS,JS |
External link / Dependencies | Yes |
Responsive | Yes |
A vertical Bootstrap carousel slider by Emran Khan made with pure HTML, CSS, and JavaScript.
14. Responsive Bootstrap Carousel
Code by | paul braam |
Demo & download | click here for code |
Language used | HTML, CSS |
External link / Dependencies | No |
Responsive | Yes |
This is a responsive Bootstrap carousel slider by paul braam which you can use for your own website. You can set it up quickly with no coding when desired.
15. Bootstrap Carousel FadeIn & Fadeout
Code by | Wisnu ST |
Demo & download | click here for code |
Language used | HTML, CSS, JS |
External link / Dependencies | No |
Responsive | Yes |
A bootstrap carousel by Wisnu ST with the effect FadeIn and FadeOut. This is made with HTML, CSS, and JavaScript.
16. Bootstrap Carousel with Ambilight
Code by | adobewordpress |
Demo & download | click here for code |
Language used | HTML, CSS, JS |
External link / Dependencies | Yes |
Responsive | Yes |
Create Responsive 3D Flip Card Using HTML and CSS
Let’s end this list with a carousel by adobewordpress with an ambient light effect. Pure HTML, CSS, and JavaScript are used here.
That’s it, folks. In this article, we shared 15+ Bootstrap Carousel & Sliders with cool and different designs. We have covered a lot of simple carousels, testimonial carousels, full-screen carousels, and many more.
Hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions, we would love to hear from you.
See our other articles on codewithrandom and gain knowledge in Front-End Development.
Thank you and keep learning!!
follow us on Instagram: @codewith_random
Written by: @ayushgoel