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によって4つづつスライドして見える というものですが、この状態ではリストは読み込まれるものの、スライダとしては働きません。
2番目のHTMLを<ul class="bxslider" id="loadl1">以下に配置すると、希望通り、10枚の中から4枚が表示され、スライドしていきます。
もちろん、このまま中に組み込んでも良いのですが、リスト部分を外に出しておけば、更新作業が容易になるため、できれば外部におきたいと思っております。
外部のhtmlファイルをスライダーに組み込む事は可能でしょうか?
可能でしたら、方法を教えて頂ければと思います。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/12/22 07:43