Add Multiple items per Slide in Bootstrap Carousel

Create Bootstrap default carousel with multiple items in one slide with help of this light weight plugin. It will extend to bootstrap built in carousel to display multiple images in carousel’s slide.

Plugin Overview

Plugin: multiple-items-per-slide
Author: Maurice Melchers
Licence: MIT Licence
Published: March 19, 2019
Repository: Fork on CodePen
Dependencies: jQuery 2.2.2 or Latest version and Bootstrap 3.3.6 or Latest
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 4.57 KB

How to Use Multiple items per Slide:

1. Load the Bootstrap framework (javascript and css) into HTML document.

<!--Bootstrap CSS-->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

<!--Bootstrap JS-->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

<link rel="stylesheet" href="css/style.css">

2. Create HTML structure for Bootstrap carousel and add your images into it.

  <div class="row">
    <div class="col-md-12">
      <div class="carousel slide multi-item-carousel" id="theCarousel">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?girl"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?bikni"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?beauty"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?yoga"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?natural"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?fitness"></a></div>
          </div>
          <!-- add  more items here -->
          <!-- Example item start:  -->
          
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?cycling"></a></div>
          </div>
          
          <!--  Example item end -->
        </div>
        <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>

3. Load the jQuery and index.js in your webpage.

<!--jQuery-->
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<!--Initialize Bootstrap Carousel-->
<script  src="js/index.js"></script>