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.