実現したいこと
slick.jsを用いてスライドショーを作成したい。
前提
WordPressでテーマ「Cocoon」を使い子テーマを編集しながら、
Local by Flywheel というソフトを使って、ローカル環境サイトを作成しています。
slickの公式を見ながら導入を試みましたが全く動いていません。
slickのファイルをDLし、ファイルを/cocoon-child-master（子テーマで一番上、page.phpと同じ階層）置きました。
テーマ（Cocoon）の仕様では、子テーマで、<head>や<body>に追加したいときは、
header-insert.php, body-top-insert.phpを使用するように推奨されています。
また、クロームの検証画面上でもhead, bodyに正しくslickのlink, scriptタグが読み込まれています。
以下のコンソールエラーが出ています。
Failed to load resource: the server responded with a status of 404 (Not Found)
slick.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
slick-theme.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
slick.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1
slick-theme.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
slick.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)該当のソースコード
**header-insert.php**
<?php
//ヘッダー部分（<head></head>内）にタグを挿入したいときは、このテンプレートに挿入（ヘッダーに挿入する解析タグなど）
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
//例：<script type="text/javascript">解析コード</script>
?>
<?php if (!is_user_administrator()) :
//管理者以外カウントしたくない場合は
//↓ここに挿入?>
<?php endif; ?>
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>
<link rel="stylesheet" type="text/css" href="/slick-1.8.1slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/slick-1.8.1slick/slick-theme.css"/>**body-top-insert.php**
<?php
//<body>タグ直後編集用のテンプレートです。
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
?>
<?php if (!is_user_administrator()) :
//管理者以外カウントしたくない場合は
//↓ここに挿入?>
<?php endif; ?>
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>
<script type="text/javascript" src="/slick-1.8.1/slick/slick.min.js"></script>****javascript.js****
//ここに追加したいJavaScript、jQueryを記入してください。
//このJavaScriptファイルは、親テーマのJavaScriptファイルのあとに呼び出されます。
//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。
jQuery().ready(function($){
$('#slider').slick();
});<ul id="slider">
<li><img src="<?php echo get_stylesheet_directory_uri() .'/images/slidesample.jpg' ?>"></li>
<li><img src="<?php echo get_stylesheet_directory_uri() .'/images/slidesample2.jpg' ?>"></li>
<li><img src="<?php echo get_stylesheet_directory_uri() .'/images/slidesample3.jpg' ?>"></li>
</ul>試したこと
パスがあっているか確かめた ⇛ 合っているが機能しない。
公式サイトを参考にした ⇛ slick 公式サイト
ブログを参考にした ⇛ - 個人のブログ
具体的な現状
jQuery().ready(function($){
$('#slider').slick();
});
上記のコードは作動しているようです。
コチラをコメントすると３枚画像が縦に並びますが、
作動させると一番上の<img>だけ表示されます。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
check解決した方法
0
パスの指定のミスでした。
slickのオプションを試しにautoplay をセットしたら作動しました。
はじめての質問で、わかりづらく書き、ご迷惑をおかけしてすみませんでした。
こういった初歩的なミスが無いように精進します。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
jQuery().ready(function($){
この記述大丈夫ですか？ 1
jQueryの基本 - $(document).ready
$('slider').slick();
slider というタグはないですよね。
sliderクラスです。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.19%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
m.ts10806
2018/11/02 19:09
コード部分がコメントでごちゃっとしていて読みづらいです。コードブロックは複数設置できるのでファイル毎にわけるなど見やすい工夫をしていただけませんか？
m.ts10806
2018/11/02 19:09
パスが合っている「はず」ではこのエラーはでません。どのように確認されたのでしょうか。cdnを利用する場合はhttps://部分まで入れておいたほうが確実です。
kei344
2018/11/02 19:36
slickはテーマフォルダに入っているのですか？
uk_63
2018/11/02 20:30 編集
テーマフォルダに入っています。
.../themes/cocoon-child-master/slick-1.8.1