質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2004閲覧

jsのエラー?

growthposition

総合スコア98

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/10/19 00:59

編集2016/10/19 01:17

現在、slick.jsをサイトに実装しております。

手順として下記の作業手順で行ったところ
http://gimmicklog.main.jp/jquery/549/

<li>~~~~</li>で囲っている画像が縦一列に表示されました。 そして、ChromeのF12で読み込みを確認したところ下記エラーが出ました。

エラー画像

今後、どのような手順、思考でアクションを起こしていけば
こちらのエラーがなくなりますか

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

ShoheiTai

総合スコア897

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

growthposition

2016/10/19 14:23

ご教示ありがとうございます。 一度ご教示頂いた内容を確認してみます! ありがとうございます!!
guest

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

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

growthposition

2016/10/19 14:22

ご教示ありがとうございます。 只今、作業をしておりますがまだうまくいきません。 もう少し試してみます! ありがとうございます。
gin

2016/10/19 14:29

↑は、さすがにうまくいきますよね?<ファイルのsrcなどはそのファイルがある場所に変更 うまくいったらscriptの部分だけ今やってるファイルに移植してみてください。 ファイルのディレクトリに気を付けて。
growthposition

2016/10/20 02:52

ありがとうございます! 途中サーバーの障害?など発生しましたが出来ました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問