0

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.

Mostafa Mohsen
  • 766
  • 5
  • 15

3 Answers3

1

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
}
Ismail Farooq
  • 6,309
  • 1
  • 27
  • 47
0

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

Zvezdas1989
  • 1,445
  • 2
  • 16
  • 34
0

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;}
Alexandra Yarmolovich
  • 1
  • 1
  • 1
    Please consider editing your answer to make it more helpful. You should add some example code, and explain why this approach works – nvioli Jan 29 '19 at 16:57