Bootstrap 5 Carousel Multiple Items

Get 700+ Material components for the latest Bootstrap 5 for free.
This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Carousel here.

For Bootstrap 5.2+, add wrap: false to stop the continuous cycle.

var carousel = new bootstrap.Carousel(multipleCardCarousel, {
  interval: false,
  wrap: false,

4.4 9 votes
Article Rating
Notify of
Oldest Most Voted
Inline Feedbacks
View all comments
3 months ago

I saw your lecture thank you so much..
but if i have many carousel object in html ..
every object have effected..
i have many object in html about baner and products and card
that is all carousel object..
how to control many object carousel id ..
can you upload again lecture by youtube

9 days ago

Hi, do you know how to allow touch on carousel?

1 month ago

Where does the jQuery code go? in the <head>

Under the imported scripts from Bootstrap, followed all other steps perfectly but this wasn’t made clear…

2 months ago

Hi. Thank you for your work! But this solution is not working for me.
Carousel is not scrolling and I have an error in Firefox:

Uncaught TypeError: can't access property "scrollWidth", $(...)[0] is undefined

Here is a description of the problem:
What went wrong?

Fatima Anahi del Huerto Campos
Fatima Anahi del Huerto Campos
3 months ago

¡Hola! veo que funciona, pero me parece raro que de 9 tarjetas solo se muevan las primeras 3 y la numero 4 solo se some, como podria solucionar esto? muchas gracias!

Fatima Anahi del Huerto Campos
Fatima Anahi del Huerto Campos
3 months ago

¡Hola! sucedo algo raro, pues tambien intente con el codigo de card en carrousel que muestra 3 y luego a ir a movil no sucede el movimiento, aqui en movil funcionan bien el tema se da que en pantalla grande no se mueven las card de este carrousel y si sucede en con el carrusel de arriba que tengo de hero,

Would love your thoughts, please comment.x