Q&A
>加えて
今回の質問が解決したあとに別質問としたほうが良いです。
ひとまず今回の質問からは除外しておいてください。
また、ブラウザ開発ツールのコンソール確認して、エラー出ていればそちらも質問に追記してください
【内容書き直しました】
スマホサイトを制作中です。
こちらの洋服カテゴリ左右矢印タップで動くカルーセルメニューを設置したく
jQueryのSlickを設置しようと各サイトを参考にしながら設置しているのですが全くできません。コピペをしてもだめです。
もともと作成してあったところへ記述をペーストしたので、別のjsやcssとかち合っているのかと思い、他のを一旦削除してまっさらな状態で行ったのですが、できません。
コピー元は本家
slick
のレスポンシブディスプレイの記述です。
スクリプトの「$('.responsive')」のところがdivのclass名だと思い、slickに変えています。
※先記述の＜CSS＞は＜Javascript＞の誤りでした。申し訳ありません。
該当記述の順番です。↓
<html> <head> <link rel="stylesheet" href="css/slick.css" /> <link rel="stylesheet" href="css/slick-theme.css"> <script> $(document).ready(function(){ $('.slick').slick({ dots: true, infinite: false, speed: 300, slidesToShow: 4, slidesToScroll: 4, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); </script> </head> <body> （看板と看板直下に検索入力ボックスとボタン） <div class="slick"> <div><img src="img1.jpg"></div> <div><img src="img2.jpg"></div> <div><img src="img3.jpg"></div> <div><img src="img4.jpg"></div> <div><img src="img5.jpg"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/slick.js"></script> </body> </html>
img1～5が縦並び状態です。
ローカルもサーバー上も同状態です。
Chromeのデベロッパーツールのコンソールには
「Uncaught SyntaxError: Unexpected end of input」の赤バツがでており
ソースを見ると</script>に赤バツがついています。
－－－－－－－－－－
まず、ちゃんと動作するようにしたいです。
どこがおかしいのか、ご指摘よろしくお願いいたします。
Webもテラテイルも初心者中の初心者です。
（2回目の質問でやっと初心者マークなどが分かったようなレベルです、すみません）
お手数ですが、ご回答よろしくお願いいたします。
－－－－－－－－－－－－－－－－－－－－－
【再再記述】
◎順番を直しました。
◎変えるつもりがないのでjs/slick.min.js だけにしました。
<html> <head> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css"> <script type="text/javascript"> $(function() { $('.single-item').slick(); }); </script> </head> <body> <div class="single-item"> <div><img src="img1.jpg"></div> <div><img src="img2.jpg"></div> <div><img src="img3.jpg"></div> <div><img src="img4.jpg"></div> </div> <script src="js/jquery.js"></script> <script src="js/slick.min.js"></script> </body> </html>
プラグインをCDNにというのは、
こちら側でファイルを落としてリンクさせるのではなく、
のように、リンク先で記述するということの認識でよろしいでしょうか。
まだやっていませんが、改めて確認です。
（別業務終わり次第、着手やります）
デベロッパーツールは
「slick.min.js:17 Uncaught TypeError: a.type is not a function」となりました。
【再々々記述】
お仕事でお忙しい中、初心者の分不相応の愚問にお答えいただき本当にすみません。そして、ありがとうございます。
<html> <head> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css"> </head> <body> <div class="single-item"> <div><img src="img.jpg"></div> <div><img src="img.jpg"></div> <div><img src="img.jpg"></div> <div><img src="img.jpg"></div> </div> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <script type="text/javascript"> $(function() { $('.single-item').slick(); }); </script> </body> </html>
お教えくださっている順番
①jQuery本体js→ https://code.jquery.com/jquery-2.2.4.min.js
②jQueryプラグイン本体js→ https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js
③jQueryプラグイン利用の記述→ <script type="text/javascript">～</script>
であっておりますでしょうか？
「CSS」と書かれてますが既に指摘がある通りJavaScriptです。
提示のコードはどこにどう書かれているのでしょうか。
コピペで他者が再現できるように、なるべく全体がわかるコードをご提示ください。
申し訳ありません、＜CSS＞は単に書き間違いでした。質問を改めて書き直します。ありがとうございます。
回答しましたがasuchi0819さんの回答の一部を切り出した回答なので確認できましたらasuchi0819さん回答をもって解決済みとしてください。
できれば回答のコメントで反応願います。
「合ってますか？」と聞く前に自身で試してその結果を以て次の展開にいってください。
回答2件
0
jQuery記法の記述を使いたい場合、jQuery本体のjsファイルを先に読み込んでおく必要があります。
それと同じく、プラグインの機能を使いたい場合、プラグイン本体のjsファイルを先に読み込んでおく必要があります。
つまり、jQueryプラグインの場合は下記の順番で記述する必要があります。
- jQuery本体js
- jQueryプラグイン本体js
- jQueryプラグイン利用の記述
これは蛇足ですが、２点。
1点目。
プラグインを使う場合もなんでもそうですが、様々なオプションがあったとしてもまず第一には最小構成のコードにしましょう。いきなりゴリゴリ組んでしまうと問題の切り分けが難しくなります。
どのプラグインも最小構成のコードはマニュアルにあるはずです。要はプラグイン実行に最低限必要なコードですね。
この考え方でコードに問題が起きたときのデバッグや問題箇所の特定に役立つので覚えておいてください。
スマホサイト作るからっていきなりresponsiveだのbreakpointだの設定しないこと。大抵はPCでコード組むのでまずPCで最低限動くものができてから。
２点目
cssを読み込ませるlinkタグの記述が２つあって２つとも同じ記法になってません。
閉じるなら閉じる、統一しましょう。これも何か問題があったときに無駄なところで引っ掛かってしまう要因にもなります。
投稿2019/10/28 05:54
編集2019/10/28 05:56総合スコア80875
ご回答ありがとうございます。
まず最低限のもの＆パソコン版で、と至極当然（なのに近道でレスポンシブの記述をしてしまった）のことができておらず、ご指摘いただき、加えてご回答に則り記述しなおしてみたのですが、うまくいきません。（質問の下部に記述等かきます）
キャッシュクリアなども試してみてくださいね。
また、プラグインのファイルなどはダウンロードして自身のサーバに配置するよりCDNを使った方がよいことも多いです
確認しましたが守られてませんね。
質問者さんのは下記の順になっています。
jQuery本体js
jQueryプラグイン利用の記述
jQueryプラグイン本体
それに、minは元のファイルの記述を圧縮して軽量化したものなので、２つプラグイン本体が読み込まれて混線状態になり得ます。
本体jsを改修するなどしないのでしたらminだけで良いです
↓これは「プラグイン利用の記述」ですよね。私の指定した記述順番になってないですよ。
$(function() {
$('.single-item').slick();
});
今の質問者さんのコードは下記の順番になっています。
jQueryプラグイン利用の記述
jQuery本体
jQueryプラグイン本体
CDNに変更するのは動いてからで十分です。
0
いろいろアレですけど
下はそもそもJavaScriptです。（厳密にいうとHTML）
JavaScript
1 2<script> 3$(document).ready(function(){ 4$('.slick').slick({ 5 dots: true, 6 infinite: false, 7 speed: 300, 8 slidesToShow: 4, 9 slidesToScroll: 4, 10 responsive: [ 11 { 12 breakpoint: 1024, 13 settings: { 14 slidesToShow: 3, 15 slidesToScroll: 3, 16 infinite: true, 17 dots: true 18 } 19 }, 20 { 21 breakpoint: 600, 22 settings: { 23 slidesToShow: 2, 24 slidesToScroll: 2 25 } 26 }, 27 { 28 breakpoint: 480, 29 settings: { 30 slidesToShow: 1, 31 slidesToScroll: 1 32 } 33 } 34 // You can unslick at a given breakpoint now by adding: 35 // settings: "unslick" 36 // instead of a settings object 37 ] 38}); 39</script> 40
し、
これをslick.jsで保存しているなら
scriptタグは削除してください。
また、slick.js(slick.min.js)とslick.css(slick.min.css)は読み込みましたか？
もし読み込んでないならダウンロードしてアップロードして読み込むかCDNをご利用ください。
まとめ
質問者さんが私の回答の意図を理解されていないようなのでまとめます。
1, CSSは全てheadの中の他のCSSより上に記述してください。
2, 読み込むファイルはslick.css(slick.min.css),slick.js(slick.min.js),jQueryの3つと設定ファイルを外部ファイルにするならそれも読み込まなければいけません。
3, bodyの綴じタグ直前にはjQuery,slick.js(slick.min.js),設定ファイルの順に読み込んでください。
4, 設定ファイルを外部ファイル化する場合はscriptタグを削除してください。
投稿2019/10/28 04:12
編集2019/10/28 05:11
総合スコア10429
ありがとうございます。
・slick.jsでは保存していません。もともとダウンロードしたslick.jsのままリンクしています
・slick.jsは</body>のすぐ上に、slick.cssは＜head>内に記述しています。
jsはjsフォルダに、cssはcssフォルダに収めていますが、良くないのでしょうか？
いろいろアレなのは、WEBもテラテイルも初心者なのでご容赦ください。
エラーだけ素直に見れば、当該回答通り、「jsファイル内にscriptタグを書いている」が原因だと思うんですけど、提示内容だけだとそもそもこのコードがどこにあるのかわからないので、的確なアドバイスは難しいですね
とりあえずまとめました。
公式のドキュメントを見てもらった方が一番良いですけどね
意図を汲めず申し訳ありません。ありがとうございます。
書き間違い等含め改めて質問書き直させていただきます。
あなたの回答
tips
プレビュー
