MonacaでJavaScriptが実行されない

###MonacaでFlickityを読み込みたい
Monaca内のページにスライダーを取り入れたいのですが、スクリプトが実行されず写真が並んで表示されているだけの状態になってしまいます。
普通のHTMLでは実行されたので、Monacaにおける書き方（呼び出す位置？)が間違っていると思われます。。

###該当のソースコード
index.html

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10 
11    <script src="components/loader.js"></script>
12    <script type="text/javascript">
13        ons.bootstrap(); 
14    </script>
15   
16<!---ここからスライダー --->
17    <link rel="stylesheet" href="css/flickity.css" media="screen">
18    
19    <script src="js/app.js"></script>
20    <script src="js/flickity.pkgd.min.js"></script>
21
22    </script>
23
24</head>
25
26<body>
27
28</body>
29</html>

page1.html

HTML
1
2<ons-page>
3<div class="container">
4
5<div class="flickity-syncer">
6<img src="画像のURL" alt="" width="100%">
7<img src="画像のURL" alt="" width="100%">
8</div>
9
10</div>
11</ons-page>

app.js

JavaScript
1///// flickity
2// スライドコンテンツを後ほど操作するための配列 (グローバル変数)
3        var flickitySyncer = [];
4        
5        // ページ内の[.flickity-syncer]のエレメントを取得する
6        var elms = document.getElementsByClassName( "flickity-syncer" ) ;
7        
8        // [elms]全てに、ループ処理でFlickityを適用する
9        for( var i=0,l=elms.length; l>i; i++ )
10        {
11            flickitySyncer[i] = new Flickity( elms[i] , {contain: true} ) ;
12        }

###参考にしたサイト
http://flickity.metafizzy.co/
https://syncer.jp/how-to-use-flickity

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

回答2件

すでに解決済みかもしれませんがもしかしたらですが、スクリプトの読み込む位置を変更することで動くかもしれません。

変更前

html
1<script src="js/app.js"></script>
2<script src="js/flickity.pkgd.min.js"></script>

変更後

html
1<script src="js/flickity.pkgd.min.js"></script>
2<script src="js/app.js"></script>

投稿2018/01/24 03:06

yama_dsn

総合スコア21

Monacaでも普通に？動作しましたよ。画像なのでimagesLoaded: trueはつけたほうがいいかと。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <script src="js/flickity.pkgd.min.js"></script>
9    <link rel="stylesheet" href="components/loader.css">
10    <link rel="stylesheet" href="css/style.css">
11    <link rel="stylesheet" href="css/flickity.min.css"/>
12    <style>
13        html, body {
14            margin: 0;
15        }
16        .carousel-cell {
17            border-radius: 5px;
18        }
19    </style>
20</head>
21<body>
22    <div class="main-carousel">
23      <img class="carousel-cell" src="img/1.png"> 
24      <img class="carousel-cell" src="img/2.png">
25      <img class="carousel-cell" src="img/3.png">
26    </div>
27    <div class="main-carousel">
28      <img class="carousel-cell" src="img/1.png"> 
29      <img class="carousel-cell" src="img/2.png"> 
30      <img class="carousel-cell" src="img/3.png"> 
31    </div>
32    <script>
33        var elms = document.getElementsByClassName('main-carousel');
34        var flkty = [];
35        for(var i = 0, l = elms.length; i < l; i++) {
36            flkty.push(new Flickity(elms[i], {
37                cellAlign: 'left',
38                imagesLoaded: true,
39                contain: true
40            }));
41        }
42    </script>
43</body>
44</html>