A Collection of free Bootstrap carousel code examples: responsive, custom, with multiple items, with thumbnails, etc.
A Bootstrap 4 carousel is a slideshow component that will allow you to display slides of images and text within the component. A carousel is a good component for showcasing products, portfolio items, testimonials, and other items on your website.
1.Bootstrap 4 Carousel / Slider with Thumbnail Navigation
Bootstrap’s Carousel works well out of the box. However, I need support for thumbnail navigation. Because I don’t know the number of images in the carousel, I need a slider for the thumbnails. The slider is built with another instance of the carousel.
Made with
Html
Css/SCSS
Javascript
bootstrap.css, ekko-lightbox.css, jquery.js, popper.js, bootstrap.js, ekko-lightbox.js
Author
Morten Brunbjerg Bech
Demo
See the Pen Bootstrap 4 Carousel / Slider with Thumbnail Navigation by Morten Brunbjerg Bech (@bechster)
on CodePen.
2.BOOTSTRAP CAROUSEL TESTIMONIALS
Testimonials using Bootstrap 4 carousel and blockquotes.
Made with
Html
Css/SCSS
Javascript
Author
Rick
Demo
See the Pen Bootstrap Carousel Testimonials by Rick (@RickRX)
on CodePen.
3.BOOTSTRAP 4 CAROUSEL MULTIPLE ITEMS PER SLIDE RESPONSIVE
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. This example is responsive.
Made with
Html
Css/SCSS
Javascript
Author
FrankieDoodie
Demo
See the Pen Bootstrap 4 carousel multiple items per slide responsive by FrankieDoodie
(@FrankieDoodie) on CodePen.
4.BOOTSTRAP 4: CAROUSEL / SLIDER / SLIDESHOW
Made with
Html
Css/SCSS
bootstrap.css, bootstrap.js, jquery.js
Author
Edgar Lnx
Demo
See the Pen Bootstrap 4: Carousel / Slider / Slideshow by Edgar Lnx
(@edgarlnx) on CodePen.
5.BOOTSTRAP CAROUSEL SLIDER
Made with
Html
Css/SCSS
bootstrap.css, animate.css, bootstrap.css, jquery.js
Author
Emran Khan
Demo
See the Pen Bootstrap Carousel Slider by Emran Khan
(@emrankhan016) on CodePen.
6.BOOTSTRAP 4 CAROUSEL
Made with
Html
Css/SCSS
bootstrap.css, bootstrap.js, jquery.js
Author
David
Demo
See the Pen Bootstrap 4 – Carousel with contents, outer controls by David (@decibeldesign)
on CodePen.
7.BOOTSTRAP CAROUSEL 100% FULLSCREEN
Made with
Html
Css/SCSS
Javascript
Author
Kathy Szczesny
Demo
See the Pen Bootstrap Carousel 100% Fullscreen by Kathy Szczesny
(@kchez) on CodePen.
8.BOOTSTRAP CAROUSEL WITH AMBILIGHT
Made with
Html
Css/SCSS
bootstrap.css, bootstrap.js, jquery.js
Author
adobewordpress
Demo
See the Pen Bootstrap Carousel with Ambilight by adobewordpress
(@adobewordpress) on CodePen.
9.FULL SCREEN CAROUSEL WITH NAVBAR
Made with
Html
Css/SCSS
bootstrap.css, bootstrap.js, jquery.js
Author
rlucasr
Demo
10.bootstrap carousel slider with animated caption
Made with
Html
Css/SCSS
bootstrap.css, bootstrap.js, jquery.js
Author
shamim khan
Demo
See the Pen bootstrap carousel slider with animated caption by shamim khan
(@shamim539) on CodePen.
11.Responsive Bootstrap Carousel
Made with
Html
Css/SCSS
bootstrap.css, bootstrap.js, jquery.js
Author
paul braam
Demo
See the Pen Responsive Bootstrap Carousel by paul braam
(@paulbraam) on CodePen.
