CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcssbootstrap-carousel
Mostafa Mohsen
Mostafa Mohsen

Reputation: 786

Bootstrap carousel item jumping when adding padding to carousel-inner

I have tried to troubleshoot this for so long and no luck. the issue is that the slider is working as it should, except when I add padding to .carousel-inner the items is jumping and appearing in the background..

Codepen can be found here

I have tried forcing no padding/margins, etc. but no luck..

EDIT: Adding padding to the parent div is not possible(won't fix it) as I'm using box-shadow in the items' contents. and it doesn't appear with overflow:hidden

Thank you in advance.

Upvotes: 0

Views: 514

Answers (3)

Alexandra Yarmolovich
Alexandra Yarmolovich

Reputation: 1

Try adding to .carousel-inner a wide transparent border instead of padding, worked for me. In the topic starter's case, the css is going to be like

.carousel-inner {border-top:20px solid transparent;}

Upvotes: 0

Ismail Farooq
Ismail Farooq

Reputation: 6837

Its because of Bootstrap add next and left class to .item to make it absolute position see this example https://codepen.io/anon/pen/POxyJg

add top:20px; top .carousel-inner>.next and .carousel-inner>.prev

.carousel-inner>.next, .carousel-inner>.prev{
  top: 20px; // top padding
}

Upvotes: 1

Zvezdas1989
Zvezdas1989

Reputation: 1465

Well I'm not sure why is it doing that, but you can add padding to you carousel ID and achieve the same effect.

#theCarousel{padding:20px;}

Now it works well: https://codepen.io/Karadjordje/pen/bYQmBP

Upvotes: 0

Related Questions