Q&A
誠に申し訳ございませんが、そこはただの凡ミスでした。
修正しましたので、クラスが一致している前提でもう一度よろしくお願いします。
スライドショー作成のために「slick」についてご質問があります。
現在、模写をしている段階でslickがあることを教えてもらい、導入方法を調査しているのですが、正しい導入方法がわからない状況です。
今現在では以下の形になっているのですが、スライドショーが機能しません。
どなたかご教授ください。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>sample</title> 7 <link rel="stylesheet" href="reset.css"> 8 <link href="css/slick-theme.css" rel="stylesheet" type="text/css"> 9 <link rel="stylesheet" type="text/css" href="css/slick.css"/> 10 <link rel="stylesheet" href="style.css"> 11 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"> 12 13</head> 14<body> 15 <ul class="slick01"> 16 <li><img alt="画像1" src="https://www.jungleocean.com/demo/jquery-slick/images/1.jpg" /></li> 17 <li><img alt="画像2" src="https://www.jungleocean.com/demo/jquery-slick/images/2.jpg" /></li> 18 <li><img alt="画像3" src="https://www.jungleocean.com/demo/jquery-slick/images/3.jpg" /></li> 19 </ul> 20 21 <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> 22 <script type="text/javascript" src="js/slick.min.js"></script> 23 <script src="script.js"></script> 24</body> 25</html>
javascript
1$(function () { 2 3 $('.slick01').slick(); 4 5});
おそらく入力方法が間違っているのかと思うのですが、、、、
＊参考にしているもの
「http://kenwheeler.github.io/slick/」
「https://webdesignday.jp/inspiration/technique/jquery-js/3847/」
回答2件
0
公式のusageを見て下さい。
https://kenwheeler.github.io/slick/
jsで指定しているクラスがHTMLのどこにもありません。
逆で言うと、HTMLで指定しているクラスをjsで指定していません。
投稿2020/06/23 07:22
総合スコア1857
0
ベストアンサー
.slider がないように見えます。.slick01の間違いでは？
コメントを受けて画像アップロード
もしよろしければLhankor_Mhyさんの動作確認では、
どのようになっているかお教えしてもらうことは可能でしょうか？
↓こうです。
投稿2020/06/23 07:27
編集2020/06/23 08:46
総合スコア36115
ご提示のコードを試してみましたが、当方の環境では問題なく動作しました。
「スライドショーが機能しません」という内容について、もう少し具体的に（たとえば、画像が縦に並んで表示されるなどと）記述していただけると、なにかご助言できることがあるかもしれません。
わざわざ試算までしていただいて本当にありがとうございます。
私の内容としましては、画像がただ縦に3枚表示がされているだけで、
スライドショーも何も機能がしていない状況です。
使用しているのは「VScode」です。
VSCode で作成しているのですね。
動作確認の環境を教えてください。
使用PC：Windows、
確認方法としてはchromeに「vscode」のindex.htmlをスライドさせると現状の作成段階が確認できます。
リセットCSSも導入、
他にも何かお伝えすべきことはございますでしょうか？
同様に確認しましたが、やはり動作しますね。
気になった点がひとつ出てきたのですが、
js/slick-theme.css
css/slick.css
これは、それぞれ正しいのですよね？
「画像がただ縦に3枚表示がされている」ということは、なんらかのスクリプトエラーが起きている可能性があります。
コンソールになにかメッセージは出ていませんか？
「js/slick-theme.css」・「css/slick.css」につきましては、
公式の「https://kenwheeler.github.io/slick/」よりダウンロードしたものから追加していますので、
中身に関しては問題ないと思われます。
また、エラーメッセージなどは、現状では見当たらないです。
ご足労をおかけしますが、もしよろしければLhankor_Mhyさんの動作確認では、
どのようになっているかお教えしてもらうことは可能でしょうか？
> 中身に関しては問題ないと思われます。
いえ、中身ではなくて、パスです。
わかりにくいでしょうか？
js/slick-theme.css
↑はjsフォルダに入っていて、
css/slick.css
↑はcssフォルダに入っているので、
なぜわざわざフォルダを別に分けたのだろう、と思ったのですが、このパスについてはお間違えないでしょうか、という質問です。
理解できなくて申し訳ございません。
ご指摘ありがとうございます。コピー＆ペーストの際に間違えたのだと思います。
修正しまして「js/slick-theme.css」を「css/slick-theme.css」に直したのですが、
やはりだめでした。
それと画像のアップロードありがとうございます。
その形が今のゴールだと確認出来て幸いです。
よければ何かお勧めのサイトなどはありますでしょうか？
私の能力不足がゆえに多くのサイトを調査しても解決が見いだせない現状です。
うーん、すみません、わかりかねます。
一応念のため確認いたしますが、「エラーメッセージなどは、現状では見当たらない」とのことですが、これはChromeの開発者ツールで確認されているのですよね？
choromeの開発者ツールでエラーが確認できることは知りませんでした。
ありがとうございます。エラー内容の確認が取れました。
こちらを参考に再調査してみます。
>「js/slick-theme.css」・「css/slick.css」
この２つのファイルは読み込ませたいHTMLから見てどこに置いてありますか？
それだけの問題ですよ。おそらく。
うーん、違うと思います。
おそらく、jsの問題かと。
皆様、コメントありがとうございます。
何が問題だったかの追求はわかりませんでしたが、
エラーより一つ一つ修正していたら治りました。
ありがとうございました。
ともかく、ご解決されて何よりです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/23 07:28