Q&A
エラーメッセージにmv.jsとjquery.min.jsがあるようですが、これらを読み込んでいる部分をご提示いただけますか？
前提・実現したいこと
node.js初心者です。
webサイトにslickでスライドショーを入れたいのですが、
動かないです。
どうしたらいいか教えていただきたいです。
宜しくお願い致します。
発生している問題・エラーメッセージ
Uncaught TypeError: $(...).not(...).slick is not a function at HTMLDocument.<anonymous> (mv.js:3) at j (jquery.min.js:2) at k (jquery.min.js:2)
該当のソースコード
html
1 2<head> 3: 4: 5 <link rel="stylesheet" href="./assets/css/style.css" /> 6</head> 7: 8: 9<body> 10: 11: 12 <ul class="slider"> 13 <li class="slider-item slider-item1"></li> 14 <li class="slider-item slider-item2"></li> 15 <li class="slider-item slider-item3"></li> 16 </ul> 17: 18: 19 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 20 </script> 21 <script src="./assets/js/script.js"></script> 22 </body> 23 24</html>
javascript
1import $ from 'jquery'; 2import 'slick-carousel'; 3 4$(function(){ 5 $(".slider").not('.slick-initialized').slick({ 6 fade:true,//切り替えをフェードで行う。初期値はfalse。 7 autoplay: true,//自動的に動き出すか。初期値はfalse。 8 autoplaySpeed: 3000,//次のスライドに切り替わる待ち時間 9 speed:1000,//スライドの動きのスピード。初期値は300。 10 infinite: true,//スライドをループさせるかどうか。初期値はtrue。 11 slidesToShow: 1,//スライドを画面に3枚見せる 12 slidesToScroll: 1,//1回のスクロールで3枚の写真を移動して見せる 13 pauseOnFocus: false,//フォーカスで一時停止を無効 14 pauseOnHover: false,//マウスホバーで一時停止を無効 15 }); 16}); 17//スマホ用：スライダーをタッチしても止めずにスライドをさせたい場合 18$(function(){ 19 $('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){ 20 $('.slider').slick('slickPlay'); 21 }); 22});
試したこと
https://flex-box.net/slick-npm/
こちらのサイトを見てやってみたのですが、うまくいきません。
どうしたらいいか教えていただきたいです。
宜しくお願い致します。
補足情報（FW/ツールのバージョンなど）
javascript の$(function(){ ～の部分からmv.jsとなっております。
jquery.min.jsの部分は、htmlを追加いたしました。
宜しくお願い致します。
> javascript の$(function(){ ～の部分からmv.jsとなっております。
import～ は別のファイルなのですか？
そちらの部分は、script.jsに書いていまして、
import $ from 'jquery';
import 'slick-carousel';
import { mv } from './modules/mv';
このような形でscript.jsに書いています。
import $ from 'jquery';
import 'slick-carousel';
↑の部分はmv.jsに書いたほうが良いのでしょうか？
いえ、jQuery のプラグインを読んだ後に jQuery を読み込むと、プラグインが無効になるのです。
jQuery を複数実行しているようなので、その実行順が気になっただけです。
あなたの回答
tips
プレビュー
