ここから本文です

jsを学習してまだ1か月も経たない初心者なのですがホームページを作成する際にス...

nar********さん

2019/2/2617:57:22

jsを学習してまだ1か月も経たない初心者なのですがホームページを作成する際にスライダーを使いたく、プラグインを導入しようとしたところ全く反映されないためやり方が間違っているのか教えていただきたいです。

まずプラグインを使うのも初めてなのでいくつかのサイトを参考にしたのですが一番わかりやすかった
https://blanks.site/post/post18.html さんのを参考させて頂き、slick-1,8,1をダウンロードしました。
その際に
jsとcssは別ファルダにしても問題ないのですが、
css、ajax-loader.gif、/fonts/の階層構造は変更させないほうがいいので、これらは同じファルダ内に設置してください。
とのことでしたのであまり階層を滅茶苦茶にしたくなかったのでslickの中身だけを作成しているファイルに入れました。

次にjQueryと一緒に読み込むため<head>部分に
<link rel="stylesheet" href="/slick/slick-theme.css">
<link rel="stylesheet" href="/slick/slick.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/slick/slick.min.js"></script>
を書き込みました。(サイトに記載しているまま書き込み)

<body>タグのなかには
<body>
<div id="wrap">
<ul id="slider">
<li><span>1枚目</span></li>
<li><span>2枚目</span></li>
<li><span>3枚目</span></li>
</ul>
</div>
と書き込みスライドさせる作りをし
bodyの閉じタグの上に
<script type="text/javascript">

$(function(){
$("#slider").slick();
});
</script>
と実行するスクリプトを書き込みました。

cssファイルでの書き込みでは、次のようにしました。
#wrap {
background-color: #ddd;
padding: 50px 0;
}

#slider {
width: 200px;
height: 100px;
margin: 0 auto;
}
#slider li {
background-color: #666;
}
#slider span {
display: block;
width: 100%;
line-height: 100px;
font-size: 20px;
color: #fff;
text-align: center;
}

本来では先ほどの実行コードですぐ実行されるみたいなのですが、何度更新しても調べても解決できませんでした。

自分なりに間違えた原因を考えてみたのですがこの中で該当する原因はあるでしょうか?


1.まずそもそもダウンロードしたプラグインファイルのとりだしたファイルが間違っていたのか。また、そのほかにも読み込まなければなかったのか(添付した画像はダウンロードして一番初めに表示される画面です。slickファイルの中にはfontファイルからcss,jsファイル、GIFファイルなど入ってます。)

2.スペルミスやscriptタグの書く場所が間違っている

3.jQueryの導入し方が間違っている

*jQueryの導入も正直あやふやなとこがありまして、Jquery本体をダウンロードして読み込む方法と
Google Hosted Librariesでたった1行でライブラリが実行できる。というサイトを見て本体以外でのgoogleの
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
という記述で書き換えたのですが全く反映されませんでした。


上記以外にもたくさんあると思いますが、ご教示お願いします

stylesheet&amp;quot,span&amp;gt,script src,li&amp;gt,script&amp;gt,link rel,ダブルクリック

閲覧数:
31
回答数:
1

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

sii********さん

2019/2/2620:08:30

> <link rel="stylesheet" href="/slick/slick-theme.css">
> <link rel="stylesheet" href="/slick/slick.css">

パスが絶対パスになっているのが気になりますが、ローカルサーバーを立ててテストしているのでしょうか?

そうではなく、例えばindex.htmlなどをダブルクリックしたり、ドラッグ&ドロップしたりしてブラウザに読み込ませているなら、

/slick/

ではなく、

./slick/

となるはずです。前者は絶対パス、後者は相対パスです。

------------

なお、

> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

この読み込み方について、src属性が//で始まっていますので、サーバーを立ててhttpやhttpsでページを開いている場合はこれでいいのですが、先に述べたようにダブルクリック等で読み込んでいて、fileプロトコルでの読み込みになっている場合、CDNからファイルを読み込むためには、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

このようにプロトコルも記載しなければなりません。

jQueryの読み込みについては、元のソースの書き方(httpsで始まっている)で問題無いと思います。

  • sii********さん

    2019/2/2620:13:42

    ディレクトリの内容から、

    kenwheeler/slick: the last carousel you'll ever need
    https://github.com/kenwheeler/slick/

    公式からダウンロードしたのではないかと思いますが、編集等を一切しない状態で、解凍して出てくるindex.htmlを開いた場合の動作はどうでしょうか?

    それすらも動作しない場合は、環境が原因という可能性も出てくるので、例えば使用するブラウザを変えてみる(Edge、Firefox、Chromeなどなど)も良いと思います。

  • その他の返信(1件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2019/2/26 20:36:57

わかりやすく的確な回答だったためベストアンサーに選ばせて頂きました。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる