Search code examples
javascripthtmlcsstwitter-bootstrapcarousel

Bootstrap 4 vertical carousel not working in Bootstrap 5 beta


I was building vertical Carousel with Codeply's example, which works flawlessly with latest Bootstrap 4.6. But when the same Vertical Carousel was tried with Bootstrap 5 beta the carousel example was not working.

Original codyply-vertical-carousel-example

Modified forked version tested to work flawlessly with Bootstrap 4.6 latest version.

However, the same example is not working with Bootstrap 5 beta . The bootstrap 5 version

Any help would be appreciated. Thanks

Edit : To make it simple scroll(slide), just sliding the below cards/items, remove the slide class. It will simply have the clickable sliding cards

Bonus If anyone could provide sliding animation, default animation(with slide class) show n items in between animation after click


Solution

  • There are two different I have found in Carousel Bootstrap 5 beta:

    1. In Carousel controls it is data-bs-slide not data-slide
    2. When click on next arrow added class in carousel item is carousel-item-start not carousel-item-left and When click on previous arrow added class in carousel item is carousel-item-end not carousel-item-right

    Example link