尝试将Slick Carousel加载到Foundation 6.5中

时间:2018-12-18 16:01:23

标签: javascript jquery zurb-foundation

我正在尝试将光滑的轮播与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(),这似乎解决了我使用精巧脚本的问题。< / p>

require('../../../node_modules/slick-carousel');
require('../../../node_modules/slick-carousel/slick/slick');
require('./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

我认为未定义这些 $类型是如果脚本在jquery之前加载?我相信有了require()脚本,它将在JQuery之后加载?

Uncaught ReferenceError: $ is not defined?

还有另一种格式化脚本的方式吗?

这是完整的app.js文件的屏幕截图,以防万一我在错误的地方放了东西。

app.js screenshot

1 个答案:

答案 0 :(得分:2)

使用jQuery代替$或命名空间; 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 );