bootstrap carousel resizing image when changing slide

Question

Hi so I've used the command:

<script type='text/javascript'>
$(document).ready(function() {
     $('.carousel').carousel({
         interval: 4500
     })
});    

right before my closing body tag in order to get my bootstrap carousel to start and scroll through automatically.

The problem is that the last slide briefly resizes to a smaller height (moving the whole page up with it) before sliding back to the first slide.

To explain: All the slide images are the same size and all show at the same size as they slide through. But the last slide shortens (decreases in height) quickly before the first slide appears again (the first slide is shown back at the correct/original height of the slides). This is annoying because the temporary decrease in slide height causes the entire page to shift upwards.

To clarify, the last slide is initially starting at the correct height, then for a split second before sliding back to the first slide the last slide shortens in height. The first slide is then shown at the correct height again.

I have no idea what is causing this?

Answer 1

This is because there is no default height for the carousel slides. To keep the slides at a consistent height, add a predefined height or min-height to the slide's css. Example:

.carousel-inner .item {
min-height: 400px;
}

I use min-height in case my content overflows on different devices.