Slick.jsをindex.phpで実装したい。

index.htmlで「Slick.js」を実装し、スライダーを動作させたのですが、これをindex.phpで実装するためには、どこをどう変えれば良いでしょうか？

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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
6<link rel="stylesheet" href="css/base.css" media="screen">
7
8<!-- slick.js -->
9<link href="js/slick-theme.css" rel="stylesheet" type="text/css">
10<link href="js/slick.css" rel="stylesheet" type="text/css">
11<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
12<script type="text/javascript" src="js/slick.min.js"></script>
13
14<!-- drawer.js -->
15<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/css/drawer.min.css">
16<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
17<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script>
18</head>
19
20<body class="drawer drawer--right">
21
22<div class="main">
23
24<!-- ドロワー -->
25
26<div>
27ドロワーの要素
28</div>
29
30<!-- スライダー -->																			 
31																				
32<div class="container">
33	<ul class="slider">
34		<li><img src="images/slider1.png" alt=""></li>
35		<li><img src="images/slider2.png" alt=""></li>
36		<li><img src="images/slider3.png" alt=""></li>
37		<li><img src="images/slider4.png" alt=""></li>
38	</ul>
39</div>
40
41<div>
42メインコンテンツ(一切いじってない要素です)
43</div>
44
45<?php include("sidebar.php");?>
46
47</div><!-- main -->
48
49<?php include("footer.php");?>
50
51<!-- slick.js -->
52<script>
53$('.slider').slick({
54    autoplay:true,
55    autoplaySpeed:5000,
56    dots:true,
57});
58</script>
59<!-- drawer.js -->
60<script>
61$(document).ready(function() {
62                  $('.drawer').drawer();
63                  });
64</script>
65</body>

このままindex.phpにするとスライダーが動かず、画像が4枚縦に並ぶ状態です。

ちなみにWordPressではありません。

また、こちらは修正案件で〆切が迫って焦っています。

__phpがサッパリ分かっていない__ので、質問の仕方がおかしいかもしれませんが、どうぞよろしくお願いいたします。

kyoya0819

2019/09/08 20:26

拡張子をhtmlからphpに変えたら動かなくなったんですか？拡張子がhtmlの時は正しく動作しましたか？

hebochans

2019/09/08 20:36

はい、htmlの時は正しく動作していましたが、phpに変えたら動かなくなりました。

kyoya0819

2019/09/08 20:37

ほかに拡張子をphp に変えた際いじったことはありませんか？

hebochans

2019/09/08 20:48

ないと思います。 index.htmlで確認してから、index.phpに変えて先方に提出し、先方がサーバーに上げたところ動かないということで、現在は私の方で修正、アップロードしています。 phpがよく分かっていないのですが、基本的に拡張子をphpに変えるだけで他に何かしなくて良いのでしょうか？？

kyoya0819

2019/09/08 20:49 編集

html->phpに拡張子を変えただけで表示に不具合が出ると言った問題が発生するのは聞いたことがないです。

hebochans

2019/09/08 21:09

そもそもの依頼がスライドショーやハンバーガーメニューが実装できない+細かな修正でして、元々もらったデータ(index.php)からindex.htmlにコードを切り出して、同じくもらったデータ(base.css)を修正しながら、新たにこちらでjsフォルダに「slick.css」他をダウンロードして実装しました。 index.phpに問題がないということは、他のphpファイル(私の方では一切いじってません)に書いてある何かが邪魔してるとかは考えられますか？

kyoya0819

2019/09/08 21:19

index.phpにほかに記述はありますか。できれば載せていただきたいです。依頼そうなので本文等は適当に置き換えていただいて構いません。

hebochans

2019/09/08 21:46

更新させていただきました！よろしくお願いいたしますm(＿＿)m

行動規範の内容に同意します

回答2件

ベストアンサー

CDN使えばいい話では。

CSS

投稿2019/09/09 00:02

m.ts10806

総合スコア80875

hebochans

2019/09/09 02:11

動きました！ありがとうございます！！最後に1つ、「ハンバーガーメニューの中のテキストがリンクをxxx.phpにしたものだけ、クリックしないとテキストが表示されない問題」が残っているので、それはまた別で質問させてください。よかったらご回答お願いいたします。お二人ともこんな僕にお付き合いいただいて、本当にありがとうございますm(＿＿)m

m.ts10806

2019/09/09 02:14

いずれにしてもCDNは根本解決ではないとは思います。バージョンの問題等々はあるのではないでしょうか。あと >こちらは修正案件で〆切が迫って焦っています。これは書かれても「そんなん知らん」のが他人なので、書かないほうが変な詮索を強いることなくアドバイスが得られると思います。基本的に私はそういうのが書いてある質問には回答してません。今回も根本解決ではない回答を提示しています。おそらくほぼ何も進んでないのとイコールです。

行動規範の内容に同意します

HTML
1<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
2<script type="text/javascript" src="js/slick.min.js"></script>

をbodyの閉じタグの直前に入れてください。

HTML
1<!-- 省略 -->
2<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
3<script type="text/javascript" src="js/slick.min.js"></script>
4<script>
5$('.slider').slick({
6    autoplay:true,
7    autoplaySpeed:5000,
8    dots:true,
9});
10</script>
11</body>