###前提・実現したいこと
現在bxsliderを利用してイメージギャラリーを稼働しているのですが、同一内容のスライダーを別ページでも使用するため、コンテンツ内容のみ外部ファイル化したいと考えています。
当サイトで同様の内容の質問があったのですが、うまく動作させることができなかったため、質問させて頂きます。
https://teratail.com/questions/23164
###発生している問題・エラーメッセージ
外部ファイル化したコンテンツ内容を読み込ませるスクリプトがうまく動作しない。
###該当のソースコード
javascript
1<!--元のソース--> 2<ul class="bxslider"> 3<li> 4<a href="#" target="_top"><img src="test1.jpg" alt="" width="400" height="400" title="キャプション内容1"></a></li> 5<li><a href="#" target="_top"><img src="test2.jpg" alt="" width="400" height="400" title="キャプション内容2"></a> 6</li> 7</ul> 8 9<script> 10 $(document).ready(function () { 11 $('.bxslider').bxSlider({ 12 touchEnabled: true, 13 auto: true, 14 }); 15 }); 16 </script> 17 18 19 20<!--改造後ソース--> 21<ul class="bxslider" id="loadl1"></ul> 22 23 <script> 24 $(function() { 25 $('#loadl1').load('loadlist.html', function() { 26 $('.bxslider').bxSlider({ 27 touchEnabled: true, 28 }); 29 }); 30 </script> 31 32<!--loadlist.htmlソース--> 33<li> 34<a href="#" target="_top"><img src="test1.jpg" alt="" width="400" height="400" title="キャプション内容1"></a></li> 35<li><a href="#" target="_top"><img src="test2.jpg" alt="" width="400" height="400" title="キャプション内容2"></a> 36</li> 37
###試したこと
ロードしたい内容を「loadlist.html」という外部ファイルに落とし込み、ロードしてもbxsliderをロード出来ていません。ブラウザで確認すると、該当部分の表示が空白になっています。
https://teratail.com/questions/23164
上記質問内での説明では、loadlist.htmlを呼び込んだ後にbxsliderを起動するとのことですが、ソース通りに記載してもだめでした。
bxsliderを動かすのに必要なファイル(jquery.min.js及びjquery.bxslider.min.js)は間違いなくリンクしております。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答1件
あなたの回答
tips
プレビュー