Я хочу, чтобы содержимое ползунка, которое я напишу, было автоматическая ширина и высота , а когда одна строка завершилась, остальные элементы автоматически переместились на следующий ползунок карусель. Я использую bootstrap 4, и у меня есть Item-Slider (тип слайдера), который отображается на сайте. Код ниже одного слайдера, код других слайдеров тоже одинаков. Это автоматическая высота и ширина содержимого, и я хочу, чтобы четвертый элемент автоматически перемещался к следующей карусели слайдов
<div class="carousel-inner">
<div class="carousel-item active">
<div class="bannerpic">
<div class="card">
<div class="card-body">
<h1>1 of 1</h1>
<div class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare pharetra elit vitae mollis. Mauris consectetur semper diam ac pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare pharetra elit vitae mollis. Mauris consectetur semper diam ac pretium.
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h1>1 of 2</h1>
<div class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare pharetra elit vitae mollis. Mauris consectetur semper diam ac pretium.
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h1>1 of 3</h1>
<div class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare pharetra elit vitae mollis. Mauris consectetur semper diam ac pretium.
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h1>1 of 1</h1>
<div class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare pharetra elit vitae mollis. Mauris consectetur semper diam ac pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare pharetra elit vitae mollis. Mauris consectetur semper diam ac pretium.
</div>
</div>
</div>
</div>
</div>