Example 9: Bootstrap Carousel Crossfade Alternative

Example of using BootStrap 4.5.3 Carousel HTML & CSS code with Responsive Slides ²

HTML

<div id="carouselFadeExample" class="carousel slide carousel-fade" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselFadeExample" data-slide-to="0" class="active"></li>
    <li data-target="#carouselFadeExample" data-slide-to="1"></li>
    <li data-target="#carouselFadeExample" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666" /><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555" /><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselFadeExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselFadeExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

This is the default code used by BootStrap 4.5.3 as the official fade carousel example.

CSS

You don't need to include the default stylesheet, everything is provided by the default bootstrap stylesheet framework's module. If you want to get ride-off of the bootstrap stylesheet completely, you can still use the following one as an alternative:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/peter-power-594/ResponsiveSlides.js@2.2.2/dist/css/bootstrap-carousel.min.css">

JS

<script src="https://cdn.jsdelivr.net/gh/peter-power-594/ResponsiveSlides.js@2.2.2/dist/js/responsiveslides.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Slideshow 9
  new responsiveSlides('#carouselFadeExample .carousel-inner', {
    boostrap: true
  });
});
</script>

Add the setting boostrap to true to enable the boostrap mode. The script will automatically look for existing pager or navigation

Find out more in the next examples or jump to the documentation

Responsive Slides ²

Simple & lightweight responsive slideshow plugin