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

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

新規登録して質問してみよう
ただいま回答率
85.51%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

12195閲覧

bxsliderで「サムネイルを選択中」と分かるような表示をさせたい

southern_flavor

総合スコア70

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2015/06/04 23:46

編集2015/06/04 23:50

サムネイル付きの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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

cloneされたaタグのほうにactiveクラスがついたときに表示されていないようです。

恐らくですが、サムネイルをスライドさせる機能はbxsliderには用意されていないため、
スライダーを2つ作って強引にやろうとした結果そうなってしまっているように見えます。

私がやるなら、bxsliderはあきらめて別のプラグインを探すと思います。
ご希望の動きができそうなものを貼っておきますので、よければ参考にしてください。

carouFredSel
http://codingmania.net/jquery/719.html

Slider Pro
http://sterfield.co.jp/designer/%E3%82%AF%E3%83%BC%E3%83%AB%E3%81%A7%E3%82%AB%E3%83%83%E3%82%B3%E3%82%A4%E3%82%A4%E3%81%84%E3%82%8D%E3%82%93%E3%81%AA%E6%A9%9F%E8%83%BD%E6%BA%80%E8%BC%89%E3%81%AE%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80.html

投稿2015/06/05 02:14

ina

総合スコア127

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

southern_flavor

2015/06/10 23:45

こちらも遅くなってしまい、すみません。 確かにbxsliderにはサムネイルをスライドさせる機能はないようですね、、。 とあるブログにサムネイル付きのbxslider作成方法を紹介している方がおり、それを参考にしました(サムネイル選択中にアクティブにする方法までは書いてなかったですが、、) その他のプラグイン紹介ありがとうございます。 以前、二つとも試してみたのですが、挫折してしまいました。 もう一度、試してみたいとおもいます。 flexsliderもあったので、そちらも。 ありがとうございました。
guest

0

私が以前bxSliderを使った時は サムネイルの<a>タグのclass="bx-pager-link"に 「 active」がaddされる仕様でしたので

lang

1a. active{ 2スタイルの仕様 3}

とすれば良かったのですが...
見る限りサムネイルの<a>タグにはクラスがありませんから....
JSのヴァージョンが違うか何かだとその限りではありませんが
一度、サムネイルの<a>部分にclass="bx-pager-link"を追加されてみてはいかがでしょうか

投稿2015/06/05 01:57

編集2015/06/05 02:08
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

southern_flavor

2015/06/10 23:38

お礼が遅くなってすみません。 上で紹介したコードは実際に作ってるものを簡易化したもので、a.activeを追加してやったのですが、始めは枠が表示されるものの二枚目以降のスライドからは枠が消えてしまいます。 バージョンを変えてやってみたいと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問