尝试将Slick Carousel加载到Foundation 6.5中 [英] Trying to load Slick Carousel into Foundation 6.5
问题描述
我正在尝试将光滑的轮播与Foundation 6.5一起使用,并且似乎无法使其正常工作.
I'm trying to use slick carousel with Foundation 6.5 and can't seem to get it to work.
我放置了基本的HTMl标记
I put the basic HTMl Markup
<div class="slick-test">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
我将js文件添加到app.js中,我从 import 更改为 require(),这似乎解决了我使用光滑脚本时遇到的问题.
I added the js files to app.js, I changed from import to require() which seemed to fix an issue I was having with the slick script.
require('../../../node_modules/slick-carousel');
require('../../../node_modules/slick-carousel/slick/slick');
require('./slick-scripts');
在光滑脚本中,我放了一个基本脚本
In slick-scripts I put a basic script
$(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
我认为未定义这些 $类型是如果脚本在jquery之前加载?我相信有了require()脚本,它将在JQuery之后加载?
I thought these types of $ is not defined were if the script was loading before jquery? I believe with the require() script this would load after JQuery?
还有另一种格式化脚本的方式吗?
Is there another way that I should format the script?
这是完整的app.js文件的屏幕截图,以防万一我在错误的地方放了东西.
Here is a screenshot of the full app.js file in case I have something in the wrong place.
推荐答案
使用jQuery代替$或对其命名空间; jQuery的基础称为"jQuery".此处更多内容: https://foundation .zurb.com/forum/posts/53512-how-to-to-call-jquery-in-64 .该论坛帖子中包含一些解决方法,它们可以执行相同的操作.
Use jQuery instead of $, or namespace it; Foundation jQuery is called with "jQuery". More here: https://foundation.zurb.com/forum/posts/53512-how-to-call-call-jquery-in-64. There are some workarounds included in that forum post that do the same thing.
一种方法是这样的(帽子小提示):
One way is like this (hat tip):
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
这篇关于尝试将Slick Carousel加载到Foundation 6.5中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!