1

I'm trying to use slick carousel with Foundation 6.5 and can't seem to get it to work.

I put the basic HTMl Markup

<div class="slick-test">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

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
  });
});

I'm still getting the following error 

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

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?

Uncaught ReferenceError: $ is not defined?

Is there another way that I should format the script?

Here is a screenshot of the full app.js file in case I have something in the wrong place.

app.js screenshot

BPowers
  • 47
  • 3
  • You need to 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, I'm not sure why it's this hard to use jQuery with Foundation. – Nathaniel Flick Dec 19 '18 at 01:26
  • Nathaniel, thank you so much. This solved my problem. Two methods I found that seem to work are the two-step method by charlyRoot in the post you mentioned, or by replacing $(document).ready(function() with jQuery(document).ready(function($). I'm new to Stack Overflow but I can't seem to mark your comment as correct do you need to post it as an answer? – BPowers Dec 19 '18 at 13:58
  • Excellent! Yep I’ll post my comment as an answer with more detail. – Nathaniel Flick Dec 19 '18 at 17:15

1 Answers1

2

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 );
Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31