Image of carousel autostart when changing a slide

Question

Hi, so I used the command:

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

right in front of my closing body tag to start my autoload, and automatically scroll.

The problem is that the last slide briefly resizes to a smaller height (moving the entire page up with it) before returning to the first slide again.

Explain: all slide images are the same size and they are all displayed at the same size in which they slide. But the last slide quickly shrinks (decreases in height) before the first slide appears again (the first slide is displayed at the correct / original slide height). This is annoying because temporarily reducing the height of the slide causes the entire page to move up.

To clarify, the last slide first starts at the correct height, and then for a second of a second, before sliding back to the first slide, the last slide is reduced in height. Then the first slide is displayed at the correct height.

I do not know what causes this?

Answer 1

This is due to the fact that the height of the carousel slides is absent. To keep the slides at a constant height, add a predefined height or minimum height to the css slide. Example:

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

I use the minimum height if my content overflows on different devices.