jQuery 一部本番環境で動作しない

##問題と状況
ECサイトのランディングページで、同じデザインのページで複数モール運営しています。
なぜか、一つのモールで本番環境にアップロードすると一部動作しません。

jQuery 3.4.1で、動かないのが、Slick.jsスライダー1.8.0です。

ローカル環境では動作しており、Chromeのデベロッパーツールでエラーは一つも出ていません。
jQueryでajax loadも使用していますが、こちらは問題なく動作しています。
他のモールの本番環境でも問題なく動作していますが、一つのモールのみ動作しませんでした。
モールのテクニカルサポートでは、特にjavascriptに対しての制限はなく、技術的なサポートは出来ないということで、問い合わせの旅に熟読したマニュアルPDFを送ってきます。

複数モール間で一番大きな違いは、この問題の本番環境では、絶対パス指定が出来ません。
モールのドメインすら含むとエラーとなります。全て相対パス。
javascriptライブラリを、外部のcdnから持ってくる場合のみ//から始まるドメイン指定は通ります。

テクニカルサポートでは、多くも問題はパス指定が正しくないということですが、サーバからエラーが返ってきていない上、ajax loadで呼んだjsも操作していることから、パス間違えが原因とは考えにくいと思っています。

slickは、このモールの他の店舗もつかっており、動作していたのでいくつかの店舗さんのソースも参考にさせていただきましたが、なぜか動作しません。

ご助言よろしくお願いします。

index.html

HTML
1<!DOCTYPE html>
2<html>
3<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
4<meta charset="utf-8">
5    
6<!--viewport-->
7<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
8
9<link rel="apple-touch-icon" sizes="180x180" href="icon.png">
10<title>ページのタイトル</title>
11
12<link rel="stylesheet" href="./css/reset.css">
13<link rel="stylesheet" href="./css/style.css">
14    
15<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
16
17<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
18
19</head>
20
21<body>
22
23<main>
24
25<div class="slide"></div>
26    <script>
27        $(function(){
28            $(".slide").load("./demo/slide_dm.html .inner", function (){
29                $.getScript("./js/cal_slide_dm.js");
30            });
31        })
32    </script>
33
34</main>
35
36</body>
37</html>

slide_dm.html　ajax loadされる外部ファイルです。

HTML
1<div class="LPS-inner">
2        <!--ローディング待機-->
3        <div class="loader-wrap">
4            <div class="loader">Loading...</div>
5        </div>
6
7        <div class="slide_dm">
8
9            <div class="topslider">
10                <div class="bannerlist" class="slicik-slide">
11
12                    <div class="main1">
13                        <a href="#" target="_parent">
14                            <img src="img/img1.jpg" alt="画像1" class="pc">
15                            <img src="img/img1_sp" alt="画像1" class="sp">
16                        </a>
17                    </div>
18
19                    <div class="main2">
20                        <a href="#" target="_parent">
21                            <img src="img/img2.jpg" alt="画像2" class="pc">
22                            <img src="img/img2_sp.jpg" alt="画像2" class="sp">
23                        </a>
24                    </div>

cal_slide_dm.js　ajaxで読み先で動かしたいスクリプト

JS
1/*ローディング*/
2$(function(){
3	var loader = $('.loader-wrap');
4
5	//ページの読み込みが完了したらアニメーションを非表示
6	$(window).on('load',function(){
7		loader.fadeOut();
8	});
9
10	//ページの読み込みが完了してなくても3秒後にアニメーションを非表示にする
11	setTimeout(function(){
12		loader.fadeOut();
13	},3000);
14});
15
16/*スケジュール 必ず、対象の要素の後にスクリプトを入れる*/
17var startday = [];
18var endday = [];
19
20startday[1] = new Date('');/**/
21endday[1] = new Date('2020/05/05 23:59');
22
23startday[2] = new Date('');/**/
24endday[2] = new Date('');
25
26startday[3] = new Date('');/**/
27endday[3] = new Date('');
28
29startday[4] = new Date('');/**/
30endday[4] = new Date('');
31
32startday[5] = new Date('');/**/
33endday[5] = new Date('2020/05/05 23:59');
34
35var today = new Date();
36
37for (i = 1; i <= 5; i++) {
38if (startday[i] > today || today > endday[i]) {
39    $('.main' + i).remove();
40    }
41}
42            
43/*slickオプション*/
44$(document).ready(function () {　
45    $('.bannerlist').slick({　
46        accessibility: true,
47        autoplay: true,
48        adaptiveHeight: true,
49        arrows: true,
50        dots: true,
51        centerMode: true,
52        centerPadding: '10%',
53        responsive: [
54            {
55            breakpoint: 768, //767px以下のサイズに適用
56                settings: {
57                slidesToShow:1,
58                centerMode: true,
59                centerPadding: '20px',
60                }
61            }
62        ]
63    });
64});
65

###jsの内容
ローディング待機で、開始前終了後のキャンペーンバナーが見えないようにローディングされるまで要素を隠す部分です。これは問題なく動きました。

スケジュールは、バナーの表示期間設定。
こちらも、終了したバナーの要素はちゃんと消えました。

slickオプション　ローカルのライブプレビューでは問題なく動いていますが、本番環境にアップすると、動作しません。
このオプション以前にslick.min.jsが動作しているのかというところです。

yuki84web

2020/06/19 05:19

ブラウザの開発者ツールの、コンソールやネットワークのタブで何かエラーが出ていたら、それも記載をお願いします。

raven

2020/06/19 06:25 編集

ローカル環境でも、本番環境でも、コンソールとネットワークのタブには何もエラーは出ていませんでした。

yuki84web

2020/06/19 06:31

「このオプション以前にslick.min.jsが動作しているのか」については、ブラウザのデバッガでブレークポイントを付けて読み込んでみると分かりませんか

raven

2020/06/19 08:46

ブレークポイントの使い方がいまいちわかりませんでした。ローカル環境では、 <div class="bannerlist" class="slicik-slide"> この部分の class="slicik-slide"　がなくなり、 class="slicik-slide eventlist slick-initialized slick-slider slick-dotted"に変わっていて、スクロールするたびに、要素内で transformのパラメータが動いていますが、本番環境になると <div class="bannerlist" class="slicik-slide"> class="bannerlist" 　がなくなり、class="slicik-slide"だけになって要素内でなにも動いていない状態でした。

yuki84web

2020/06/19 08:54

スライド部分にクラスの付与が無いということは実行されていない、しかしコンソールにエラーに何もないということであれば、jsがロードされていないと推測出来ますが、開発者ツールのネットワークタブでslick.min.jsのリクエストのHTTPステータスはどうなっていますか？

raven

2020/06/19 09:17

200が出ています。

yuki84web

2020/06/20 01:43

200というこては読み込みは出来ていると思うので実行されないのが不明ですが、CDNではなくサーバー内に設置して利用してみてはどうでしょうか。

raven

2020/06/20 02:30

サーバーに設置も試してみましたが結果は同じでした

yuki84web

2020/06/20 02:36

あとは、サーバーのログ（関係なさそうだけどWAFがあるならそれも）見るとかくらいですかね。お力に慣れず、すみません。

raven

2020/06/22 01:20

ありがとうございました。時間を置いて本番環境のページをみたら正常に動いていました。原因は何かわかっていませんが、クラス要素を見直して不要なdiv要素を削減してみました。それでもローカルでは動いていたというのは不可解ですが、 slicik-slideのクラス名が間違いで、正しくはslick-slideでした。 CDNからで問題なく動いています。お手数おかけしました。