Q&A
jQueryのプラグインのslickを使って画像が流れるようなスライダーを作りたいです。
・下記を参考に作ってみたのですが全然動きません、、
https://qiita.com/triamquium/items/eace7179d3c54c079b0f
・必要なファイルはgithubからダウンロード済み
https://kenwheeler.github.io/slick/
・ファイル構成
slick.css
slick-theme.css
fontフォルダ
ajax-loader.gif
をcssフォルダにぶっこむ。
slick.min.js
をjsフォルダにぶっこむ。
結果添付した画像のような形とエラーが出てしまいます。詳しい方いましたら教えてください。
よろしくお願いいたします。
index.html
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="UTF-8"> 6 7<link rel="stylesheet" type="text/css" href="/css/slick.css" media="all"> 8 <link rel="stylesheet" type="text/css" href="/css/slick-theme.css" media="all"> 9 <link rel="stylesheet" type="text/css" href="/css/style.css" media="all"> 10 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 11 <script type="text/javascript" src="/js/slick.min.js"></script> 12 13.... 14 15<ul id="mainSlide"> 16<li><img src="https://images.pexels.com/photos/1110355/pexels-photo-1110355.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></li> 17<li><img src="https://images.pexels.com/photos/1563355/pexels-photo-1563355.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></li> 18</ul><!-- / #mainSlide --> 19 20 21... 22 23<script> 24$(function(){ 25 var slick = $('#mainSlide').slick(); 26}); 27</script> 28 29 30</body> 31</html> 32 33... 34 35 36 37
追記
<link rel="stylesheet" type="text/css" href="css/slick.css" media="all"> <link rel="stylesheet" type="text/css" href="css/slick-theme.css" media="all"> <link rel="stylesheet" type="text/css" href="css/style.css" media="all"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/slick.min.js"></script> で直りました。 原因はajaxのパスとslick.min.jsのパスの間違いでした。 （とりあえずエラーは消えました、、ありがとうございます。）
回答2件
0
エラーそのままですが、パスが合ってません。
/で始まるとルートからのパスになります。
特に、サーバーではなくローカルにおいているファイルから実行する際には利用してはいけません。
./など自ファイルからの相対パスにしましょう。
投稿2019/01/16 07:19
総合スコア80850
0
ベストアンサー
http://lab.agr.hokudai.ac.jp/useful/utile/Path_URL.htm
既に解答されている方もいますが、パスが絶対パス指定になっています。
CSSファイルの場所が見つかりませんよ～と怒られているので、
古めですがリンク先などを参考に相対パスで指定しなおすと動くと思います。
投稿2019/01/16 07:24
総合スコア2341
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。