Carousel multi-items step 1 by 1

[Pyvonix]

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.

[Johann-S]

it's an interesting solution 👍

Any feedbacks @XhmikosR ? If I remember well, you succeed to implement that with our current v4 carousel 🤔

[XhmikosR]

My solution didn't make any use of an option, it always defaults to show 3, slide 1 on >= 768px.

[Pyvonix]

I come back to you with a solution for the management of CSS based on a number of unknown elements.

As version 4 of bootstrap fully exploits flex. I propose to continue in this way and I propose something like this for the CSS part (related to the html posted the previous post):

.carousel-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.carousel-item.active {
    flex: 1;
}

In practice this solution needs small adjustments like .carousel-inner { height: 300px !important; and .carousel-item.active {max-width: 600px;} in my case to handle the different sizes of pictures.

But this is a very simple proposition, how have two advantages:

• first one, don't break the current code for the carousel,
• second one, flex don't about the number of elements in carousel and will cut width: 1/number of element. But I don't teach you anything.

I hope to bring you a little more help to find the best solution.

[mdo]

Carousel is designed to flip one item at a time. If you need more items in each carousel slide, you'll need to nest them and customize to your project's requirements. As it stands now, I don't think this component needs to be any more complicated than it is today. Thanks for the suggestion, though!

[dtrunk90]

In my opinion this should be reopened for v5 because it's quite common to have a product or thumbnail or gallery carousel showing multiple items and stepping 1 by 1. If you wish I can have a look and provide a pull request if i succeed. It just depends on the decision of the bootstrap maintainers because I don't want to waste time and effort if your opinions can't be changed.

[XhmikosR]

@dtrunk90 if you think you can make a proper PR with tests and everything, feel free to proceed. I definitely agree it would be a good feature.

[mikenewbon]

Also would like to advocate for this - this is a common use case, you see it very regularly in places like Netflix, I have had to bastardise the carousel to make it work here: https://studio.blender.org/films/spring/

[jadelomeiri]

Wish multi-items carousels would be available in Bootstrap 🙏 This seems to be the only really important component that's missing. These days almost every website has a multi-items carousel - specially on mobile, more and more designers now prefer to have carousels on mobile rather than stacking things up (so many designs trying to follow Netflix/YouTube/Fb/Insta/etc with their stories/reals carousels)

[y377]

Also would like to advocate for this - this is a common use case, you see it very regularly in places like Netflix, I have had to bastardise the carousel to make it work here: https://studio.blender.org/films/spring/

This is a very good example of a website that has inspired me, may I ask if this website is yours?

[mikenewbon]

I did build it yes, I left the project about a year ago though but mostly the same since! Thanks so much.

On Wed, 3 May 2023, 17:54 y377, @.***> wrote:

Also would like to advocate for this - this is a common use case, you see it very regularly in places like Netflix, I have had to bastardise the carousel to make it work here: https://studio.blender.org/films/spring/

This is a very good example of a website that has inspired me, may I ask if this website is yours?

— Reply to this email directly, view it on GitHub https://github.com/twbs/bootstrap/issues/27652#issuecomment-1533290338, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFMH2ZWEFHGL3MRDCPPQPODXEJ5UTANCNFSM4GDCHE4Q . You are receiving this because you commented.Message ID: @.***>

[RobineSavert]

Another advocate for multiple items, step 1 by 1 here, would love it if this was available!