###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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。