外部から読み込んだHTMLでスライダーさせる事は可能でしょうか？

jQueryを使用して、スライダーページを作成したいのですが、困った事がありますので、お知恵を貸していただけると助かります。

実現したいのは、liをスライドさせるスライダーです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>スライダーテスト</title>
6<link href="style.css" rel="stylesheet" type="text/css">
7<link href="jquery.bxslider.css" rel="stylesheet" type="text/css">
8<script src="jquery-1.11.3.js"></script>
9<script src="jquery.bxslider.min.js"></script>
10<script src="script2.js"></script>
11<script src="script1.js"></script>
12</head>
13<body>
14<div class="alpha">
15  <ul class="bxslider" id="loadl1">
16</div>
17
18画像は、<a =href="https://www.pakutaso.com/">ぱくたそ</a>さまの画像を使用させていただきました。
19</body>
20</html>

javascript
1$(function() {
2 $('#loadl1').load('loadlist.html');
3});
4

html
1   <li><a href="http://www.pakutaso.com/ "><img src="https://www.pakutaso.com/shared/img/thumb/150628090775_TP_V1.jpg" width="160" /></a></li>
2    <li><a href="http://www.pakutaso.com/ "><img src="https://www.pakutaso.com/shared/img/thumb/PAK75_kocchitonnnayo20150109075655_TP_V1.jpg" width="160" /></a></li>
3    <li><a href="http://www.pakutaso.com/ "><img src="https://www.pakutaso.com/shared/img/thumb/HIRA85_kamibukurokaraderesou_TP_V1.jpg" width="160" /></a></li>
4    <li><a href="http://www.pakutaso.com/ "><img src="https://www.pakutaso.com/shared/img/thumb/MAR85_tumewotoguneko20140113_TP_V1.jpg" width="160" /></a></li>
5    <li><a href="http://www.pakutaso.com/ "><img src="https://www.pakutaso.com/shared/img/thumb/MAR86_hurikaeruneko20130223_TP_V1.jpg" width="160" /></a></li>
6    <li><a href="http://www.pakutaso.com/ "><img src="https://www.pakutaso.com/shared/img/thumb/HIRA85_ookinaakubiwosuruneko_TP_V1.jpg" width="160" /></a></li>
7    <li><a href="http://www.pakutaso.com/ "><img src="https://www.pakutaso.com/shared/img/thumb/HIRO2_odoroitahyoujyounoneko_TP_V1.jpg" width="160" /></a></li>
8    <li><a href="http://www.pakutaso.com/ "><img src="https://www.pakutaso.com/shared/img/thumb/N811_kawaiikonekocyan_TP_V1.jpg" width="160" /></a></li>
9    <li><a href="http://www.pakutaso.com/ "><img src="https://www.pakutaso.com/shared/img/thumb/PPU_nekononikukyu-_TP_V1.jpg" width="160" /></a></li>
10    <li><a href="http://www.pakutaso.com/ "><img src="https://www.pakutaso.com/shared/img/thumb/PP_nekohamu_TP_V1.jpg" width="160" /></a></li>

javascript
1$(document).ready(function(){$
2  ('.bxslider').bxSlider({
3     auto: true,//自動切り替えの有無
4     pause:6000,//停止時間※デフォルトは4000
5     speed:1000,//動くスピード※デフォルトは500
6     minSlides: 3,//一度に表示させる画像の最小値
7     maxSlides: 4,//一度に表示させる画像の数
8     slideWidth: 160,
9     slideHeight: 160,
10     slideMargin: 15,
11     pager: true,
12     prevText: '＜',
13     nextText: '＞',
14     infiniteLoop: true // true
15   });
16});

こちらの希望としては、2番目のHTMLをloadlist.htmlとして保存して置くと、jQueryのloadによって<ul class="bxslider" id="loadl1">部分にリストのHTMLが読み込まれるので、それがbxsliderによって４つづつスライドして見えるというものですが、この状態ではリストは読み込まれるものの、スライダとしては働きません。

2番目のHTMLを<ul class="bxslider" id="loadl1">以下に配置すると、希望通り、10枚の中から4枚が表示され、スライドしていきます。

もちろん、このまま中に組み込んでも良いのですが、リスト部分を外に出しておけば、更新作業が容易になるため、できれば外部におきたいと思っております。

外部のhtmlファイルをスライダーに組み込む事は可能でしょうか？

可能でしたら、方法を教えて頂ければと思います。

よろしくお願いいたします。

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

回答1件

ベストアンサー

loadlistを読み込み終わったタイミングでbxSliderを起動すればいけると思います。

js
1$(function() {
2  $('#loadl1').load('loadlist.html', function() {
3    $('.bxslider').bxSlider({
4      // options
5    });
6});

投稿2015/12/22 05:35

naga3

総合スコア1293

ky_46

2015/12/22 07:43

ありがとうございます。こちらで動作しました。よく考えたら、別HTMLを読み込んでいるのだから、読み込み後の設定をしなければ鳴らなかったですね。気付かなかったとはお恥ずかしい限りです。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

外部から読み込んだHTMLでスライダーさせる事は可能でしょうか？

関連した質問