Bootstrap Carousel - Whole website jumps when image is changing

Question

Hey lovely StackOverflow Community.

I have a problem with my website. I added the Bootstrap Carousel from getbootrap.com and it actually works very well. But there is one problem. Everytime the image sitch, my whole website goes up and down.

I don't know what could be the problem, cause i changed nothing on the code from getbootstrap.com :-/

Sorry for my bad english :D Hope you can understand my problem.

Answer 1

Overwrite the Bootstrap class. This will solve your problem

.carousel-inner>.item {
          width: 100%;

}

Answer 2

My issue with the Carousel was not directly related to the image, but rather the content within it that was causing the shifting of the page. To avoid it while being elsewhere on the page, I just used JQuery to detect if I had scrolled past my carousel and to make it pause. I know its a workaround but its effective.

$(document).on("scroll",function(){
if($(document).scrollTop()>200){
    $('#slider').carousel('pause');
} else{
    $('#slider').carousel('cycle');
}});