Responsive Flexible Bootstrap Carousel Plugin With jQuery

This is a responsive, flexible jQuery/Bootstrap carousel plugin that allows for multiple images on one slide and auto adjusts the number of images depending on the screen width.

How to use it:

1. First you need to load jQuery library and Bootstrap framework in the webpage.

<link rel="stylesheet" href="/path/to/bootstrap.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.js"></script>

2. The load the Flexible Bootstrap Carousel's files after jQuery library.

<link rel="stylesheet" href="flexible-bootstrap-carousel.css">
<script src="flexible-bootstrap-carousel.js"></script>

3. Finally, just add carouse items together with navigation controls to the carousel and we're done.

<div class="carousel flexible slide" data-ride="carousel" data-interval="5000" data-wrap="true">
  
  <div class="items">

    <div class="flex-item">
      <img class="img-responsive" src="1.jpg"/>
    </div>
  
    <div class="flex-item">
      <img class="img-responsive" src="2.jpg"/>
    </div>
    
    <div class="flex-item">
      <img class="img-responsive" src="3.jpg"/>
    </div>
    
    <div class="flex-item">
      <img class="img-responsive" src="4.jpg"/>
    </div>
    
    <div class="flex-item">
      <img class="img-responsive" src="5.jpg"/>
    </div>
    
    <div class="flex-item">
      <img class="img-responsive" src="6.jpg"/>
    </div>

    ...

  </div>
  
  <div class="carousel-inner" role="listbox">
  </div>
  
  <a class="left carousel-control" href="#simple-content-carousel" role="button" data-slide="prev">
    <span class="fa fa-angle-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>

  <a class="right carousel-control" href="#simple-content-carousel" role="button" data-slide="next">
    <span class="fa fa-angle-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  
</div>

Change log:

2017-03-14

• added possibility to change number of entities in each item of a carousel

2017-02-27

• Code refactor

---

This awesome jQuery plugin is developed by DanDevG. For more Advanced Usages, please check the demo page or visit the official website.