CODEWITHSUNDEEP
twitter-bootstrapwidthcarousel
Ender
Ender

Reputation: 158

Bootstrap Carousel recalculates width of elements

Hi the problem is in the slider in the lower part of the page. Carousel is doing something strange - in the less than a second after doing the animation, it recalculates width of every element in current item. It looks terrible, and after checking the CSS I still do not know, how to fix it.

Do You have any idea?

Bootstrap Carousel Problem

Upvotes: 0

Views: 1284

Answers (2)

Kevin Tong
Kevin Tong

Reputation: 3886

@Erik Reppen 's code didn't work out.

I don't have a good solution but I did fix it. I observed the bootstrap's carousel example very carefully http://twitter.github.com/bootstrap/javascript.html#carousel.

I find out that img width has to be larger than the grid width. In span9, width is up to 870px, so you have to prepare a image larger than 870px. If you have more container outside the img, as all the container has border or margin something, you can use image with smaller width.

As in http://twitter.github.com/bootstrap/javascript.html#carousel, you can ues width 830px as there is in between div.span9 and Carousel

Upvotes: 0

Erik Reppen
Erik Reppen

Reputation: 4635

Under landing-page.css:

.content-carousel .container .carousel .carousel-inner .item { padding:0 5% }

I turned this off and it fixed the problem. I haven't diagnosed exactly why this was causing an issue but having a written a carousel or two, % padding on the items struck me as a bad idea. If the padding is critical, you might want to try setting box-sizing to border-box but I didn't notice anything other than the elimination of the rubber banding of your items.

Upvotes: 1

Related Questions