文章/答案/技术大牛

发布

社区首页 >问答首页 >Owl Carousel在安装时不起作用，即使遵循指南也是如此

问Owl Carousel在安装时不起作用，即使遵循指南也是如此
EN

Stack Overflow用户

提问于 2021-05-10 14:50:34

回答 2查看 25关注 0票数 0

我一遍又一遍地阅读文档和设置，但我似乎无法让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>

html

回答 2

Stack Overflow用户

发布于 2021-05-10 14:59:28

更改：

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

至：

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

代码中的选择器选择标记为owl-carousel的元素。但它需要选择具有owl-carousel类的元素。

票数 0

Stack Overflow用户

发布于 2021-05-10 15:28:56

有几件事：

用'owl-carousel'代替

修复你的查询选择器'.owl-carousel'

 <script>$('.owl-carousel').owlCarousel();</script>

检查以确保您正确链接了样式表。根据包含CSS的方式，此步骤可能会略有不同。我只是从here下载了它，将其解压缩，将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"以匹配我的文件结构

<link rel="stylesheet" href="owlcarousel/assets/owl.carousel.min.css">

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67465961

复制

相似问题

问Owl Carousel在安装时不起作用，即使遵循指南也是如此
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Owl Carousel在安装时不起作用，即使遵循指南也是如此EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Owl Carousel在安装时不起作用，即使遵循指南也是如此
EN