尝试将 Slick Carousel 加载到 Foundation 6.5答案

【问题标题】：Trying to load Slick Carousel into Foundation 6.5尝试将 Slick Carousel 加载到 Foundation 6.5
【发布时间】：2018-12-18 16:01:22
【问题描述】：

我正在尝试在 Foundation 6.5 中使用 slick carousel，但似乎无法正常工作。

我放了基本的 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

我认为这些类型的 $ 没有定义 如果脚本在 jquery 之前加载？我相信在 JQuery 之后会加载 require() 脚本？

Uncaught ReferenceError: $ is not defined?

还有其他方式可以格式化脚本吗？

这是完整 app.js 文件的屏幕截图，以防我放错地方了。

app.js screenshot

【问题讨论】：

你需要使用jQuery而不是$，或者命名空间它；基础 jQuery 被称为“jQuery”。更多信息：foundation.zurb.com/forum/posts/…。有一些解决方法，我不确定为什么将 jQuery 与 Foundation 一起使用会这么难。
纳撒尼尔，非常感谢。这解决了我的问题。我发现似乎有效的两种方法是您提到的帖子中 charlyRoot 的两步方法，或者将 $(document).ready(function() 替换为 jQuery(document).ready(function($).I'我是 Stack Overflow 的新手，但我似乎无法将您的评论标记为正确，您需要将其发布为答案吗？
太棒了！是的，我会发布我的评论作为更详细的答案。

标签： javascript jquery zurb-foundation

【解决方案1】：

使用 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 );

【讨论】：