引导列不是连续的

Question

此代码的结果是列不在一行中。我在本节中使用 Slick。谁能告诉我为什么？

这些幻灯片是我要滑动的东西。

<div class="col-12">
  <div data-aos="fade-right" class="first-slider pt-5">
      <!--Slide 1-->
      <div class="row align-items-center">
        <div class="col-md-7 col-12"><img src="https://via.placeholder.com/500x300" class="img-fluid"></div>
        <div class="col-md-5 col-12 order-md-last order-first desktop-section">
          <h1 class="heading3 mb-3 text-white">Test 1</h1>
          <p>Lorem ipsum dolor sit</p>
        </div>
      </div>

      <!--Slide 2-->
      <div class="row align-items-center">
        <div class="col-md-7 col-12"><img src="https://via.placeholder.com/500x300" class="img-fluid"></div>
        <div class="col-md-5 col-12 order-md-last order-first desktop-section">
          <h1 class="heading3 mb-3 text-white">Test 2</h1>
          <p>Lorem ipsum dolo</p>
        </div>
      </div>

      <!--Slide 3-->
      <div class="row align-items-center">
        <div class="col-md-5 col-12"><img src="https://via.placeholder.com/500x300" class="img-fluid"></div>
        <div class="col-md-5 col-12 order-md-last order-first desktop-section">
          <h1 class="heading3 mb-3 text-white">Test 3</h1>
          <p>Lorem ipsum</p>
        </div>
      </div>
  </div>
</div>

这里是光滑的 JS

//slick
$('.first-slider').slick({
    dots: true,
    appendDots: $('.slick-slider-dots'),
    prevArrow: $('.slick-prev'),
    nextArrow: $('.slick-next'),
})

Answer 1

请参阅此codepen，它展示了如何使用jQuery 和Bootstrap-5 实现slick-carousel。

注意：在 slick.js 文件之前链接 jQuery 和 jQuery-migrate

注意：链接 slick.css 和 slick-theme.css

用于创建上述 Codepen 的 CDN。

bootstrap

slick.min.css

slick-theme.min.css

jQuery

jQuery-migrate

slick.min.js

请参阅official docs，了解如何从光滑轮播开始。