Bootstrap Carousels Examples< View Code Snippets Library
Change Bootstrap Carousel Navigation IconsBootstrap 4
This demonstrates how you can swap out the default SVG icons used in Bootstrap carousels. I swapped out the left and right arrows with some of the new Bootstrap Icons.
Carousel with auto height background imagesBootstrap 4
If you add a carousel into a column grid it naturally scales the height to fit the height of the slide images. What if you want the height of the carousel to match the height of the other columns? In this demo, I swapped out the image tag for a div with a background image. This will then give us control in how things are scaled.
Crossfade Carousel Instead of Slide LeftBootstrap 4
This demonstrates how using the
.carousel-fadeclass changes the slide translation to crossfade instead of slide. Official documentation.
Full Width Carousel with Responsive ImagesBootstrap 4
The carousel code snippet provided on the Bootstrap 4 documentation has the class
.img-fluidwhich would require you to use large images that scale down to mobile. This can make your pages load slower than needed.
Using the responsive
<picture>tag you can load different pictures for different screen sizes and pixel densities. Achieving optimal page load speed and design control.
If you need IE browser support use this picturefill script.
If a picture looks blurry on a retina device, you can add a high resolution image version like this
<source srcset="img/blog-post-1000x600-2.jpg, firstname.lastname@example.org 2x" media="(min-width: 768px)">
What image sizes should you use? You will often want to use common aspect ratios found in video media. I created a demo to show what these different sizes look like.
Bootstrap 4 Image Slider ResponsiveBootstrap 4
A basic image slider with previous and next navigation. You can easily swap out the navigation text with icons for a simplified design. Adding
.w-xs-100to your images forces the component to expand to the width of its parent container.
Bootstrap Carousel Multiple Items Increment by 1Bootstrap 3
Bootstrap 3 responsive carousel multiple items per slide
Code to customize the Bootstrap 3 carousel slider component so it does not autoplay and increments by 1 item per click.
Looking for something else?
Suggest or contribute a code snippet to be added to the library.
Other Code Snippet Categories