时间戳

首页 > 解决方案 > Owl Carousel 只显示一个项目和按钮

html - Owl Carousel 只显示一个项目和按钮

问题描述

我正在尝试使用 Owl Carousel 构建一个轮播，但它没有显示任何内容（只有圆形按钮和一个项目）我无法弄清楚代码有什么问题以及为什么我不能正确使用它。这是代码：

<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
    />
  </head>
  <body>
    <div class="my-div">
      <div class="test owl-theme owl-carousel">
        <div class="test-item"
          ><h4>test</h4>
          <p> this is a test </p>
          <div>
            <img src="https://cv.octascript.com/images/Tooska.jpg" alt="" />
          </div>
        </div>
        <div class="test-item"
          ><h4>test</h4>
          <p> this is a test </p>
          <div>
            <img src="https://cv.octascript.com/images/Bilit.jpg" alt="" />
          </div>
        </div>
        <div class="test-item"
          ><h4>test</h4>
          <p> this is a test </p>
          <div>
            <img
              src="https://cv.octascript.com/images/ElhamZareei.jpg"
              alt=""
            />
          </div>
        </div>
        <div class="test-item"
          ><h4>test</h4>
          <p> this is a test </p>
          <div>
            <img src="https://cv.octascript.com/images/Tooska.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
    <script>
      $(".test").owlCarousel({
        loop: true,
        margin: 20,
        responsive: {
          0: {
            items: 1,
          },
          600: {
            items: 2,
          },
          1000: {
            items: 3,
          },
        },
      });
    </script>
  </body>
</html>

我尝试了视频、文档和教程，但无法解决。当然，我同时使用了 CDN 和本地文件，但结果还是一样。

标签： htmljqueryowl-carousel

解决方案

推荐阅读