Попытка загрузить Slick Carousel в Foundation 6.5 - PullRequest
Новая
       9

Попытка загрузить Slick Carousel в Foundation 6.5

0 голосов
/ 18 декабря 2018

Я пытаюсь использовать гладкую карусель с 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 я поместил базовый сценарий 

$(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: $ не определен?

Есть ли другой способ отформатировать скрипт??

Вот скриншот полного файла app.js на случай, если у меня что-то не в том месте.

скриншот app.js

1 Ответ

0 голосов
/ 19 декабря 2018

Используйте jQuery вместо $ или пространство имён;Основание jQuery вызывается с помощью «jQuery».Подробнее здесь: https://foundation.zurb.com/forum/posts/53512-how-to-call-call-jquery-in-64. В этом сообщении на форуме есть некоторые обходные пути, которые делают то же самое.

Один из способов такой: (* ​​1005 * hat tip ): 

(function($) {

    // $ Works! You can test it with next line if you like
    // console.log($);

})( jQuery );
...