Home > Net >  Bootstrap 5 carousel not working as expected
Bootstrap 5 carousel not working as expected

Time:10-10

I'm trying to embed this carousel in my Bootstrap 5 page. It comes from Codepen - enter image description here

I can't figure out for the love of God what is going wrong here. The carousel just won't work. Can anyone point out what I'm doing wrong here. There's another carousel on the page which works just fine. I've also tried this same code in a Bootstrap 4 setting with no carousels but I get the same result.

Can someone point out what I'm doing wrong here?

CodePudding user response:

First of all you are using the wrong .item class. This should be like below:

<div class="carousel-item">
  <blockquote>
    ...
  </blockquote>
</div>

That will fix the display.

Next, you have missed the data attribute prefix in several places (used in BS5) go through your code and add bs- where needed (data-bs-ride, data-bs-target, data-bs-slide, etc.) and the carousel will work as expected.
See my working snipet:

https://getbootstrap.com/docs/5.1/components/carousel/

  • Related