我正在尝试将 slick carousel 与 Foundation 6.5 一起使用,但似乎无法正常工作。
我放置了基本的 HTMl 标记
<div class="slick-test">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
我将 js 文件添加到 app.js,我从 import 更改为 require() 这似乎解决了我在使用 slick 脚本时遇到的问题。
require('../../../node_modules/slick-carousel');
require('../../../node_modules/slick-carousel/slick/slick');
require('./slick-scripts');
在 slick-scripts 我放了一个基本的脚本
$(document).ready(function(){
$('.slick-test').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
我仍然收到以下错误
slick-scripts.js:1 Uncaught ReferenceError: $ is not defined
at Object../src/assets/js/slick-scripts.js (slick-scripts.js:1)
at __webpack_require__ (bootstrap:19)
at Module../src/assets/js/app.js (app.js:18)
at __webpack_require__ (bootstrap:19)
at Object.0 (app.js:24299)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
我认为这些类型的 $ is not defined 是脚本是否在 jquery 之前加载?我相信 require() 脚本会在 JQuery 之后加载?
Uncaught ReferenceError: $ is not defined?
还有其他方法可以格式化脚本吗?
这是完整的 app.js 文件的屏幕截图,以防我在错误的地方出现问题。
最佳答案
使用 jQuery 代替 $,或者命名它; Foundation jQuery 被称为“jQuery”。更多信息:https://foundation.zurb.com/forum/posts/53512-how-to-call-call-jquery-in-64 .该论坛帖子中包含一些解决方法,它们可以做同样的事情。
一种方式是这样的(hat tip):
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
关于javascript - 尝试将 Slick Carousel 加载到 Foundation 6.5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53836843/