javascript - 滑块内容如何在完成一行时根据项目内容自动移动到下一张幻灯片？

Question

我希望我将编写的滑块内容应该是自动宽度和高度，当一行完成时，其他项目自动移动到下一个滑块轮播。我正在使用 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>

标签： javascriptjqueryhtmltwitter-bootstrapbootstrap-4