Carousel multi-items step 1 by 1

Created by: TheBuky

I'm using the last version of Boostrap (v4) and I find myself facing a limitation.

I'm trying to implement a carousel with multi-items active with a step 1 by 1 and I don't want a dirty solution like:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide - First picture" alt="First slide - First picture">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=First slide  - Seconde picture" alt="First slide - Seconde picture">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=First slide - Third picture" alt="First slide - Third picture">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=Second slide - First picture" alt="Second slide - First picture">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide - Seconde picture" alt="Second slide - Second picture">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Second slide - Third picture" alt="Second slide - Third picture">
    </div>
  </div>
</div>

Because in this situation the step for the picture rotation will be 3 by 3. So I propose a solution to handle this case (but I don't have any skill in JS to do it and open MR).

Current process: The property active was removed from the current carousel-item and added to the next carousel-item. So we can imagine to add a value to know how many ative elements the carousel can display.

Concrete case:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-value=3>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Fourth slide" alt="Fourth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Fifth slide" alt="Fifth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Sixth slide" alt="Sixth slide">
    </div>
  </div>
</div>

The JS take the value from data-value (or whatever the name is defined) and understand he have 3 (in the example) active property at the same time. So I remove the first active found and I add active to current element + 3.

In this way, we can handle many new possibilities for the carousel.