Owl Carousel 无法安装，即使遵循指南

如何解决Owl Carousel 无法安装，即使遵循指南

我一遍又一遍地阅读文档和设置，但我似乎无法让 owl carousel 正常工作。下面我有一个简单的 HTML 文件，其中包含足以让一个简单的猫头鹰轮播部分运行的内容，但它不起作用。

如果有人知道为什么它不起作用，或者我是否可以朝着正确的方向推动，那将非常有帮助。谢谢！

编辑：这是 Owl Carousel（插件？）的网站：https://owlcarousel2.github.io/OwlCarousel2/

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8">
    <title>Owls</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
</head>
<body>
    <div class="container mt-5 ml-5">
        <div class="owl-carousel owl-theme">
            <div class="ml-2 mr-2" style="background-color: #ddd;">1</div>
            <div class="ml-2 mr-2" style="background-color: #ddd;">2</div>
            <div class="ml-2 mr-2" style="background-color: #ddd;">3</div>
            <div class="ml-2 mr-2" style="background-color: #ddd;">4</div>
            <div class="ml-2 mr-2" style="background-color: #ddd;">5</div>
            <div class="ml-2 mr-2" style="background-color: #ddd;">6</div>
            <div class="ml-2 mr-2" style="background-color: #ddd;">7</div>
            <div class="ml-2 mr-2" style="background-color: #ddd;">8</div>
            <div class="ml-2 mr-2" style="background-color: #ddd;">9</div>
            <div class="ml-2 mr-2" style="background-color: #ddd;">10</div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
    <script src="owlcarousel/owl.carousel.min.js"></script>
    <script>$('owl-carousel').owlCarousel();</script>
</body>

</html>

解决方法

变化：

$('owl-carousel').owlCarousel();

致：

$('.owl-carousel').owlCarousel(); // Note the . (dot) in the jquery selector

代码中的选择器选择标签为 owl-carousel 的元素。但是需要选择owl-carousel类的元素。

一些事情：

修复您的查询选择器 QComboBox 而不是 '.owl-carousel'

'owl-carousel'

检查以确保您正确链接了样式表。根据您包含 CSS 的方式，此步骤可能略有不同。我刚刚从 here 下载并解压缩它，将 <script>$('.owl-carousel').owlCarousel();</script> 文件夹复制到我的项目中，并将其重命名为 dist/。

我的文件树：

owlcarousel/

所以，我只是将 . ├── index.html ├── owlcarousel │ ├── LICENSE │ ├── README.md │ ├── assets │ │ ├── ajax-loader.gif │ │ ├── owl.carousel.css │ │ ├── owl.carousel.min.css │ │ ├── owl.theme.default.css │ │ ├── owl.theme.default.min.css │ │ ├── owl.theme.green.css │ │ ├── owl.theme.green.min.css │ │ └── owl.video.play.png │ ├── owl.carousel.js │ └── owl.carousel.min.js 更改为 href="owlcarousel/owl.carousel.min.css" 以匹配我的文件结构

href="owlcarousel/assets/owl.carousel.min.css"