現在、slick.jsをサイトに実装しております。
手順として下記の作業手順で行ったところ
http://gimmicklog.main.jp/jquery/549/
今後、どのような手順、思考でアクションを起こしていけば
こちらのエラーがなくなりますか
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
$(...).slick is not a function
などと表示される場合は関数が定義されていないということなので、
jQueryのプラグイン(今回はslick)が正しく読み込まれていない可能性があります。
-
Networkタブを確認し、slickのjsを正しく読み込めているか(404になっていないか)
-
読み込みのタイミング、scriptタグの位置が正しい順番になっているか
などを確認してみてください。
またconsole上の**(index):287、top.js:7**などのリンクを
クリックすると該当箇所のコードを参照することができます。
記述ミスなどがないかも確認してみてください。
投稿2016/10/19 05:02
総合スコア897
0
ベストアンサー
雑ですけど、デモページの該当部分だけで試してみましたが動くので、JSの読み込み順など合ってるか確認してみてください。
公式には7以上で大丈夫っぽいこと書いてましたけど、一応jQueryを↓と同じVer11にしてみましょうか…
あとtopJSのFlexSlider部分はコメントアウトですね。
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>Demo</title> 6 7<link rel="stylesheet" href="slick-theme.css"> 8<link rel="stylesheet" href="slick.css"> 9<style type="text/css"> 10 11h2 { 12 margin: 20px 0; 13 padding:20px 10px 10px; 14 font-size: 18px; 15 font-weight: bold; 16 border-top:1px #ccc solid; 17} 18.slider { 19 margin: 0 0 50px; 20} 21.slider img { 22 width: 100%; 23 height: auto; 24} 25.single-item { 26 max-width: 600px; 27 margin: 0 auto 50px; 28} 29.slick-prev::before, .slick-next::before { 30 font-size: 24px; 31} 32.lazy-item .slick-next, 33.thumb-item-nav .slick-next, 34.multiple-item .slick-next, 35.center-item .slick-next { 36 right: 20px; 37 z-index: 99; 38} 39.lazy-item .slick-prev, 40.thumb-item-nav .slick-prev, 41.multiple-item .slick-prev, 42.center-item .slick-prev { 43 left: 15px; 44 z-index: 100; 45} 46.single-item .slick-prev::before, 47.single-item .slick-next::before { 48 color: #666; 49} 50.slick-dots { 51 bottom:-25px; 52} 53.multiple-item li { 54 margin: 0 5px; 55} 56.thumb-item { 57 max-width: 700px; 58 margin: 0 auto 5px; 59 padding: 0 5px; 60} 61.thumb-item-nav { 62 max-width: 700px; 63 margin: 0 auto; 64} 65.thumb-item-nav li{ 66 margin: 5px; 67} 68.lazy-item { 69 width: 400px; 70 margin: 0 auto 50px; 71} 72.lazy-item li { 73 margin: 0 5px; 74} 75</style> 76 77</head> 78<body> 79 80<h2>センター寄せ両サイド表示(レスポンシブ)</h2> 81<ul class="slider center-item"> 82 <li><img src="https://placehold.jp/600x300.png" alt=""></li> 83 <li><img src="https://placehold.jp/600x300.png" alt=""></li> 84 <li><img src="https://placehold.jp/600x300.png" alt=""></li> 85 <li><img src="https://placehold.jp/600x300.png" alt=""></li> 86 <li><img src="https://placehold.jp/600x300.png" alt=""></li> 87</ul> 88 89<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 90<script src="slick.min.js"></script> 91<script> 92//中央寄せ両サイド表示(レスポンシブ) 93$(function() { 94 $('.center-item').slick({ 95 infinite: true, 96 dots:true, 97 slidesToShow: 1, 98 centerMode: true, //要素を中央寄せ 99 centerPadding:'100px', //両サイドの見えている部分のサイズ 100 autoplay:true, //自動再生 101 responsive: [{ 102 breakpoint: 480, 103 settings: { 104 centerMode: false, 105 } 106 }] 107 }); 108}); 109</script> 110 111</body> 112</html>
投稿2016/10/19 02:00
総合スコア2722
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/19 14:29
2016/10/20 02:52
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/19 14:23