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

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

ただいまの
回答率

89.97%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 9,112
サムネイル付きの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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

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/11 08:45

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

    その他のプラグイン紹介ありがとうございます。
    以前、二つとも試してみたのですが、挫折してしまいました。
    もう一度、試してみたいとおもいます。
    flexsliderもあったので、そちらも。

    ありがとうございました。

    キャンセル

0

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/11 08:38

    お礼が遅くなってすみません。

    上で紹介したコードは実際に作ってるものを簡易化したもので、a.activeを追加してやったのですが、始めは枠が表示されるものの二枚目以降のスライドからは枠が消えてしまいます。

    バージョンを変えてやってみたいと思います。

    ありがとうございました。

    キャンセル

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

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる