为什么我的 OwlCarousel2 横幅不起作用？

Question

在我的主标签中，我已经实现了我的幻灯片横幅的图像。

<main id="main-site"> 
    <!-- Owl Carousel code-->
    <section id="banner-area">
      <div class="owl-carousel owl-theme">
        <div class="item">
          <img src="./images/banner.png" alt="Banner1">
        </div>

        <div class="item">
          <img src="./images/banner2.png" alt="Banner2">
        </div>
      </div>
    </section>
  </main>

并且我已经在 Javascript 上初始化了 Owl 旋转木马。

$(document).ready(function() {
    $("#banner-area.owl-carousel").owlCarousel( {
        dots: true,
        items: 1
    });

});

并链接 javascript 和 Owl Carousel jQuery 插件以访问 javascript 文件。

<!--Owl Carousel JS-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" 
    integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" 
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!--Custom JS-->
    <script src="./index.js"></script>

但即便如此。我的页面上仍然没有任何横幅...有什么问题吗？

Screenshot

编辑：我能够修复它。但是我只能在删除#banner-area时修复它，但我希望在不删除id的情况下修复它。

Answer 1

你应该在这里添加一个 space :

$("#banner-area .owl-carousel").owlCarousel( {

为什么我的 OwlCarousel2 横幅不起作用？

Why my OwlCarousel2 banner isn't working?

html

javascript

jquery

web-frontend

owl-carousel-2