CODEWITHSUNDEEP
bootstrap-4carousel
Jordi Blanch
Jordi Blanch

Reputation: 217

Bootstrap carousel flicker after content change

I'm trying to use Bootstrap 4 carousel in a responsive page, so I've added a carousel to my webpage following the example at https://getbootstrap.com/docs/4.0/components/carousel, but I've changed carousel-inner class height from a fixed height to auto

.carousel-inner { height: auto; }

this is working properly because carousel grows and shrinks when browser window resizes, but has a flicker effect after every transition because when active carousel-item changes, the carousel-inner height suddenly goes to 0px and then recovers back the height it should have. For example, if carousel heigh is 500px when showing first content, it keeps 500px height while in transition to next content, but when the next content has already moved to correct position (becomes active), then the carousel-inner height suddenly goes to 0px and back to 500px again, causing a kind of flickering.

Is there any way to prevent carousel-inner height going to 0px for a while when transitions finish while keeping the "responsiveness" that allows resizing of the carousel when resizing browser's window?

Thank you!

Upvotes: 0

Views: 529

Answers (1)

Jordi Blanch
Jordi Blanch

Reputation: 217

For those who could be facing a similar problem, I finally found what was wrong, it was a problem of "including" bootstrap JS twice in the project... I added the carousel to a Prestashop page and didn't know that Prestashop already included Bootstrap somehow, so I included it again and that caused my problems. Removing the link to bootstrap from my page solved the problem.

Upvotes: 0

Related Questions