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

【问题标题】：Why my OwlCarousel2 banner isn't working?为什么我的 OwlCarousel2 横幅不起作用？
【发布时间】：2021-12-19 23:07:48
【问题描述】：

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

<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 Carousel。

$(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的情况下修复它。

【问题讨论】：

标签： javascript html jquery web-frontend owl-carousel-2

【解决方案1】：

你应该在这里添加一个空格：

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

【讨论】：

天啊！那个时候我添加了空间，但我认为它仍然不起作用，但它正在加载！太感谢了！不敢相信我一直被这些简单的东西所困扰......
不客气 :))