Q&A
Slick.jsは最新ですか？
jQueryと同じくCDNにしても変わりませんか？
WordPressでSlick.jsが動かず調べても分かりませんでしたので、
質問させていただきます。
よろしくお願いいたします。
※コンソールで下記のエラーが出てますが、原因が分かりませんでした。
TypeError: $(...).slick is not a function
wordpressへ入れる前は動作していました。
▽スライダー部分
php
1 2<ul class="slider"> 3 <li><img src="<?php echo get_template_directory_uri(); ?>/images/slide/slide1.jpg"></li> 4 <li><img src="<?php echo get_template_directory_uri(); ?>/images/slide/slide2.jpg"></li> 5 <li><img src="<?php echo get_template_directory_uri(); ?>/images/slide/slide3.jpg"></li> 6 <li><img src="<?php echo get_template_directory_uri(); ?>/images/slide/slide4.jpg"></li> 7</ul> 8 9
▽読み込み部分
php
1<head> 2<meta name="viewport" content="width=device-width,initial-scale=1"> 3<meta charset="utf-8"> 4<title><?php bloginfo('name'); ?></title> 5<!-- Stylesheet --> 6<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" /> 7<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> 8<!-- Javascript --> 9<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 10<script src="<?php echo get_template_directory_uri(); ?>/js/slick.min.js"></script> 11<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script> 12<?php wp_head(); ?> 13</head>
▽CSS呼び出し
css
1/* CSS読み込み */ 2@import url("css/style2.css"); 3@import url("css/layout.css"); 4@import url("css/responsive.css"); 5@import url("css/slick.css"); 6@import url("css/slick-theme.css");
▽jquery 記述
jquery
1jQuery(document).ready(function($){ 2 /* 画像スライド */ 3 $(function(){ 4 $('.slider').slick({ 5 dots: true, 6 arrows: true, 7 autoplay: true, 8 vertical: false, 9 autoplaySpeed: 5000, 10 speed: 1200 11 }); 12 }); 13 });
よろしくお願いいたします。
回答2件
0
ベストアンサー
slick.jsがnot foundでないにも関わらずslick is not definedということは、slick.jsが読み込まれる前にslick()を実行しています。
おそらく、DOMが読み込まれてからslick.jsの読み込みが完了する前にjQueryが動いてしまっているのではないかと思うので、
jQuery(document).readyのかわりに、jQuery(document).onを使ってみてはどうでしょう。
（readyは最後のhtmlタグがよみこまれたら起動、onはjsや画像まで全て読み込まれたら起動）
投稿2019/02/20 10:29
編集2019/02/20 10:49
総合スコア610
回答ありがとうございます。
下記のコードにしてみたのですが、変化ありませんでした。
jQuery(document).on(function($){
$(function(){
$('.slider').slick({
dots: true,
arrows: true,
autoplay: true,
vertical: false,
autoplaySpeed: 5000,
speed: 1200
});
});
});
そうでしたか。。
最新版のCDNに差し替えてもだめとなると、wordpress側で何か不具合があるのか、コードの置き場に問題があるのか（とはいってもscripts.jsですよね。。？）
なにか思い当たる節があれば教えてください。
回答ありがとうございます
いろいろ探してみましたが、解決法が見つかりませんでしたので、
一度他のスライダープラグインで試してみようと思います。
ありがとうございました。
0
私も結構苦労した挙句に実装できなかった一人です。
のようにとりあえず動くということであれば（使えるオプションすべては試していませんのであくまでもこのように動作するよというもの）、こちらの方法で動くと思います。
苦労話とともに動いた！という方法を掲載していますので参考程度によかったら見てみてください。
※ともにリンク先は私が管理するサイトですのであしからず・・・
投稿2019/02/21 06:45
総合スコア1509
あなたの回答
tips
プレビュー
