オンラインエディタでは動作するのにレンタルサーバーにアップすると動作しない

アニメーションの練習として、
下記にアップされているスライダーアニメーションのソースコードをコピぺし自身のレンタルサーバーにアップしたところ、
矢印をクリックするとアニメーションが動作するのですが、本来は自動再生されるはずなのにされません。

■コピペ元の参考アニメーション
https://codepen.io/bcarvalho/pen/gWPvJB

cdnで読み込まれていた、jQueryとTweenMaxは読み込みました。

その他編集した箇所はなく、元のコードをコピペしただけなのですが…

逆に、動作しないソースコードをCODEPEN等のオンラインエディタにコピペすると何故か正常に動作します。

オンラインエディタでは動くのに、ブラウザでは動かない原因はなんなのでしょうか。

プラグインのバージョンは、サンプルと同じにしています。

どなたか原因がわかる方がいましたら教えてください。

HTML
1//自ら追記した部分
2<!doctype html>
3<html>
4<head>
5<meta charset="utf-8">
6<title>test</title>
7<link rel="stylesheet" href="style.css" type="text/css" media="all" />
8<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
9<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
10<script type="text/javascript" src="main.js"></script>
11</head>
12
13<body>
14	<main class="main-content">
15  ～サンプルをコピペ～
16</main>
17</body>
18</html>
19

javascript
1//main.js
2var slideshowDuration = 4000;
3var slideshow=$('.slideshow');
4
5function slideshowSwitch(slideshow,index,auto){
6  if(slideshow.data('wait')) return;
7
8  var slides = slideshow.find('.slide');
9  var pages = slideshow.find('.pagination');
10  var activeSlide = slides.filter('.is-active');
11  var activeSlideImage = activeSlide.find('.image-container');
12  var newSlide = slides.eq(index);
13  var newSlideImage = newSlide.find('.image-container');
14  var newSlideContent = newSlide.find('.slide-content');
15  var newSlideElements=newSlide.find('.caption > *');
16  if(newSlide.is(activeSlide))return;
17	
18  newSlide.addClass('is-new');
19  var timeout=slideshow.data('timeout');
20  clearTimeout(timeout);
21  slideshow.data('wait',true);
22  var transition=slideshow.attr('data-transition');
23  if(transition=='fade'){
24    newSlide.css({
25      display:'block',
26      zIndex:2
27    });
28    newSlideImage.css({
29      opacity:0
30    });
31
32    TweenMax.to(newSlideImage,1,{
33		
34      alpha:1,
35      onComplete:function(){
36		 
37        newSlide.addClass('is-active').removeClass('is-new');
38        activeSlide.removeClass('is-active');
39        newSlide.css({display:'',zIndex:''});
40        newSlideImage.css({opacity:''});
41        slideshow.find('.pagination').trigger('check');
42        slideshow.data('wait',false);
43        if(auto){
44          timeout=setTimeout(function(){
45            slideshowNext(slideshow,false,true);
46          },4000);
47          slideshow.data('timeout',timeout);}}});
48  } else {
49    if(newSlide.index()>activeSlide.index()){
50      var newSlideRight='';
51      var newSlideLeft=0;
52      var newSlideImageRight='auto';
53      var newSlideImageLeft=-slideshow.width()/8;
54      var newSlideImageToRight='';
55      var newSlideImageToLeft=0;
56      var newSlideContentLeft=0;
57      var newSlideContentRight='auto';
58      var activeSlideImageLeft=slideshow.width()/4;
59    } else {
60      var newSlideRight='';
61      var newSlideLeft=0;
62      var newSlideImageRight='auto';
63      var newSlideImageLeft=-slideshow.width()/8;
64      var newSlideImageToRight='';
65      var newSlideImageToLeft=0;
66      var newSlideContentLeft=0;
67      var newSlideContentRight='auto';
68      var activeSlideImageLeft=slideshow.width()/4;
69    }
70
71    newSlide.css({
72      display:'block',
73      width:0,
74      right:newSlideRight,
75      left:newSlideLeft
76      ,zIndex:2
77    });
78
79    newSlideImage.css({
80      width:slideshow.width(),
81      right:newSlideImageRight,
82      left:newSlideImageLeft
83    });
84
85    newSlideContent.css({
86      width:slideshow.width(),
87      left:newSlideContentLeft,
88      right:newSlideContentRight
89    });
90
91    activeSlideImage.css({
92      left:0
93    });
94
95    TweenMax.set(newSlideElements,{y:20,force3D:true});
96    TweenMax.to(activeSlideImage,1,{
97      left:activeSlideImageLeft,
98      ease:Power3.easeInOut
99    });
100
101    TweenMax.to(newSlide,1,{
102      width:slideshow.width(),
103      ease:Power3.easeInOut
104    });
105
106    TweenMax.to(newSlideImage,1,{
107      right:newSlideImageToRight,
108      left:newSlideImageToLeft,
109      ease:Power3.easeInOut
110    });
111
112    TweenMax.staggerFromTo(newSlideElements,0.8,{alpha:0,y:60},{alpha:1,y:0,ease:Power3.easeOut,force3D:true,delay:0.6},0.1,function(){
113      newSlide.addClass('is-active').removeClass('is-new');
114      activeSlide.removeClass('is-active');
115      newSlide.css({
116        display:'',
117        width:'',
118        left:'',
119        zIndex:''
120      });
121
122      newSlideImage.css({
123        width:'',
124        right:'',
125        left:''
126      });
127
128      newSlideContent.css({
129        width:'',
130        left:''
131      });
132
133      newSlideElements.css({
134        opacity:'',
135        transform:''
136      });
137
138      activeSlideImage.css({
139        left:''
140      });
141
142      slideshow.find('.pagination').trigger('check');
143      slideshow.data('wait',false);
144      if(auto){
145        timeout=setTimeout(function(){
146          slideshowNext(slideshow,false,true);
147        },4000);
148        slideshow.data('timeout',timeout);
149      }
150    });
151  }
152}
153
154function slideshowNext(slideshow,previous,auto){
155  var slides=slideshow.find('.slide');
156  var activeSlide=slides.filter('.is-active');
157  var newSlide=null;
158  if(previous){
159    newSlide=activeSlide.prev('.slide');
160    if(newSlide.length === 0) {
161      newSlide=slides.last();
162    }
163  } else {
164    newSlide=activeSlide.next('.slide');
165    if(newSlide.length==0)
166      newSlide=slides.filter('.slide').first();
167  }
168
169  slideshowSwitch(slideshow,newSlide.index(),auto);
170}
171
172function homeSlideshowParallax(){
173  var scrollTop=$(window).scrollTop();
174  if(scrollTop>windowHeight) return;
175  var inner=slideshow.find('.slideshow-inner');
176  var newHeight=windowHeight-(scrollTop/2);
177  var newTop=scrollTop*0.8;
178
179  inner.css({
180    transform:'translateY('+newTop+'px)',height:newHeight
181  });
182}
183
184$(document).ready(function() {
185 $('.slide').addClass('is-loaded');
186
187 $('.slideshow .arrows .arrow').on('click',function(){
188  slideshowNext($(this).closest('.slideshow'),$(this).hasClass('prev'));
189});
190
191 $('.slideshow .pagination .item').on('click',function(){
192  slideshowSwitch($(this).closest('.slideshow'),$(this).index());
193});
194
195 $('.slideshow .pagination').on('check',function(){
196  var slideshow=$(this).closest('.slideshow');
197  var pages=$(this).find('.item');
198  var index=slideshow.find('.slides .is-active').index();
199  pages.removeClass('is-active');
200  pages.eq(index).addClass('is-active');
201});
202
203var timeout=setTimeout(function(){
204  slideshowNext(slideshow,false,true);
205},4000);
206
207slideshow.data('timeout',timeout);
208});
209
210if($('.main-content .slideshow').length > 1) {
211  $(window).on('scroll',homeSlideshowParallax);
212}

maisumakun

2019/06/25 12:06

動かない方のブラウザコンソールに、なにかメッセージは出ていませんか？

shoooota

2019/06/25 13:24

maisumakun様コンソールには何もでていません。。。

m.ts10806

2019/06/26 00:43

>cdnで読み込まれていた、jQueryとTweenMaxは読み込みました。その部分のコードも記載してください。 HTML、CSS全てご提示ください。

shoooota

2019/06/26 02:14

mts10806様ありがとうございます。 HTMLに関しましては、サンプルとの差分（自ら追加した箇所）を追記させてもらいました。 CSSに関してはサンプルがSCSSであったため、CSSに変換（http://kachibito.net/useful-resource/sassmeister）をしてそのまま編集せずにコピペしました。

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

回答2件

次の2か所が .slideshow 出現前に実行されています。$(document).ready(function() { }); 内に入れたらいいのではないでしょうか？

jQuery
1var slideshow=$('.slideshow');

jQuery
1if($('.main-content .slideshow').length > 1) {
2  $(window).on('scroll',homeSlideshowParallax);
3}

参考にした codepen ではスクリプトは </body> 直前に挿入されているようです。

投稿2019/06/27 06:44

x_x

総合スコア13749

長過ぎるソースをどこで不具合がでているか検証するのは難題です。
動くところまでソースをコメントアウトしていき、少しずつ
追加しながら動作確認すると良いでしょう
最初まできりつめて動かなければ動作に耐える環境ではないということです

投稿2019/06/26 00:36

yambejp

総合スコア114850

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

オンラインエディタでは動作するのにレンタルサーバーにアップすると動作しない

関連した質問