サムネイル付きのbxslider(画像スライドショープラグイン)を作成中です。
サムネイルをクリックしてメインスライドに表示するまではサイトを参考にしてできました。autoplayに設定したときには、ちゃんと自動でスライドしサムネイルもスライドされます。
ただ、auto設定中にサムネイルがアクティブ中のものは黄色い枠線を表示させるようにしたいのですが、それができません。
現状は黄色い枠線が表示されたりされなかったりという状態です。
お手数ですが、ご教示いただけましたら幸いです。
こちらはコードです。
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="http://bxslider.com/lib/jquery.bxslider.css"> <script type="text/javascript" src="http://bxslider.com/js/jquery.min.js"></script> <script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script> <script> $(document).ready(function(){ //メインスライド用の記述 $('.bxslider01').bxSlider({ auto:true, pause:4000, pagerCustom: '#bx-pager',//ページャーをカスタマイズする(サムネイルにする)ための記述 controls:false//前後の矢印を消すための記述 }); //サムネイルをスライドさせるための記述 $('.bxslider02').bxSlider({ auto:true, pagerCustom: '#bx-pager',//ページャーをカスタマイズする(サムネイルにする)ための記述 pause:5000, minSlides: 3,//1スライドに表示するサムネイルの数 maxSlides: 3,//1スライドに表示するサムネイルの最大数 slideWidth: 100,//サムネイルの横幅(単位はpx) slideMargin: 8,//サムネイル間の余白(単位はpx) nextSelector: '#NextIcon',//"次へ”矢印をカスタマイズするための記述 prevSelector: '#PrevIcon'//"前へ”矢印をカスタマイズするための記述 }); }); </script> <style type="text/css"> #bx-pager a:hover img, #bx-pager a.active img { border: solid #ff0 3px; } </style> </head> <body> <div id="slider"> <ul class="bxslider01"> <li><img src="images/1.jpg" width="300" height="200" /></li> <li><img src="images/2.jpg" width="300" height="200"/></li> <li><img src="images/3.jpg" width="300" height="200"/></li> <li><img src="images/4.jpg" width="300" height="200" /></li> <li><img src="images/5.jpg" width="300" height="200"/></li> <li><img src="images/6.jpg" width="300" height="200"/></li> </ul> <div class="controlWrap"> <ul id="bx-pager" class="bxslider02"> <li><a data-slide-index="0" href=""><img src="images/1.jpg" width="100" height="100"/></a></li> <li><a data-slide-index="1" href=""><img src="images/2.jpg" width="100" height="100"/></a></li> <li><a data-slide-index="2" href=""><img src="images/3.jpg" width="100" height="100"/></a></li> <li><a data-slide-index="3" href=""><img src="images/4.jpg" width="100" height="100"/></a></li> <li><a data-slide-index="4" href=""><img src="images/5.jpg" width="100" height="100"/></a></li> <li><a data-slide-index="5" href=""><img src="images/6.jpg" width="100" height="100"/></a></li> </ul> <p id="PrevIcon"></p> <p id="NextIcon"></p> </div> <!--サムネイル(ページャー)用スライダー End--> </div> </body> </html>回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/10 23:45