CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap-3carousel
DISbeat
DISbeat

Reputation: 101

Bootstrap Carousel - Whole website jumps when image is changing

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.

Upvotes: 5

Views: 6926

Answers (3)

Apurva Ojas
Apurva Ojas

Reputation: 331

Overwrite the Bootstrap class. This will solve your problem

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

}

Upvotes: 9

Jeff Beagley
Jeff Beagley

Reputation: 1025

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');
}});

Upvotes: 1

Nick
Nick

Reputation: 14283

It is because it changes some class on the carousel items. You can set a min-height to the carousel container (.carousel-inner) and it won't jump anymore.

Set the value that fits better your needs.

ALSO: Seam like there is a little effect on the images, so that every time that an image change, it became a bit smaller. If you just want to avoid the all website jump, use what i said above, if you want to change the "change-of-size" behave, you need to check the class .next and (probably) .right/.left and see if there's a change of height. It is hard to inspect them from a live website, that why i'm telling you to check this from the code - Or upload the code if you prefer.

Upvotes: 0

Related Questions