.owlCarousel() 不是函数

Question

我知道关于这个主题已经存在数百个问题，但在仔细审查了数十个问题之后，它们都以错误的顺序包含了脚本标签。我的是正确的。

<link rel="stylesheet" href="/vendor/owl.carousel.min.css">
<link rel="stylesheet" href="/stylesheets/styles.css">
...
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script type="text/javascript" src="/javascripts/scripts.min.js"></script>
...
<div class="homepage-slider">
  ...
</div>

在 scripts.min.js 我有我的初始化：

$(function() {
  $(".homepage-slider").owlCarousel();
});

此订单抛出：

r(...).owlCarousel is not a function

一切似乎都井井有条。是否有某种 jQuery 怪癖破坏了它？我试过了：

$.noConflict();
$(function() {
  $(".homepage-slider").owlCarousel();
});

但是并没有解决问题。

额外的细节：

我正在将我的 JS 打包到一个缩小的文件中。我是这样做的：

...
import {homepageCarousel} from './modules/homepage-carousel';
...

有 8 个导入语句（它们都是 jQuery 代码片段）。轮播导入是从顶部数第二个。

Answer 1

如果您将 scripts.min.js 包含在页面的头部，那么很有可能 DOM 元素还不存在。

将您的 <script type="text/javascript" src="/javascripts/scripts.min.js"></script> 向下移动到结束 </body> 标记之前，您可能会发现它有效。

这样，DOM 元素将已经存在，因此 owlCarousel 将能够找到该元素并执行它的操作。

Answer 2

好的：

我从 NPM 包中直接将 jquery 捆绑到我的 scripts.min.js 文件中。

在每次导入中，我都有：

var $ = require('jquery');

我删除了那行，并直接从 CDN 中包含 jQuery：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

它解决了我的问题。

.owlCarousel() 不是函数

.owlCarousel() is not a function

javascript

jquery

owl-carousel