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

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

ただいまの
回答率

90.51%

  • JavaScript

    20415questions

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

  • HTML

    11507questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8157questions

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

  • CSS

    7553questions

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

複数bxsliderをタブで切り替えたいのですが…

解決済

回答 1

投稿

  • 評価
  • クリップ 2
  • VIEW 6,314

y.shima41

score 11

初めまして。

現在仕事でECサイトを作成しているのですが、複数のbxsliderをタブで切り替えて表示をさせてたいと考えております。

試してみると、1つ目はsliderがきちんと表示されていますが、
2つ目タブ以降が中身が表示されない状態となってしまいました。

bxslider.js

サイトのコード記述は下記の通りです。
<ul id="tab">
<li class="select">総合</li>
<li>トップス</li>
<li>ボトムス</li>
</ul>

<!--rank01-->
<div class="content_wrap">

<div class="bx-wrapper">
<div class="bx-viewport">

<div class="slider1">
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
</div>

</div><!--//bx-viewport-->
</div><!--//bx-wrapper-->
</div><!--//content_wrap-->

<!--rank02-->
<div class="content_wrap disnon">

<div class="bx-wrapper">
<div class="bx-viewport">

<div class="slider1">
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
</div>

</div><!--//bx-viewport-->
</div><!--//bx-wrapper-->
</div><!--//content_wrap-->


<!--rank03-->
<div class="content_wrap disnon">

<div class="bx-wrapper">
<div class="bx-viewport">

<div class="slider1">
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
</div>

</div><!--//bx-viewport-->
</div><!--//bx-wrapper-->
</div><!--//content_wrap-->
bxslider cssはほぼダウンロードしたままを使用していますが、
タブに対するcssはこちらです。
ul#tab{
    display:table;
    table-layout:fixed;
    width:100%;
}

#tab li.select {
    background: none repeat scroll 0% 0% #fff;
    color:#000;
    border-top:#d9d9d9 1px solid;
    border-left:#d9d9d9 1px solid;
    border-right:#d9d9d9 1px solid;
}

#tab li {
    display:table-cell;
    padding: 10px;
    list-style: none outside none;
    cursor: pointer;
    background: none repeat scroll 0% 0% #d9d9d9;
    text-align:center;
    border:#FFFFFF 1px solid;
    border-top-left-radius:5px; /* 左上角丸 */
    border-top-right-radius:5px;
    color:#666;
    font-size:8px;
}


.content_wrap {
    width: 100%;
    height:auto;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
    background: none repeat scroll 0% 0% #fff;
    color: #000;
    overflow:hidden;
}

.disnon {
    display: none;
}

タブのJava Scriptは
$(function() {
    $("#tab li").click(function() {
        var num = $("#tab li").index(this);
        $(".content_wrap").addClass('disnon');
        $(".content_wrap").eq(num).removeClass('disnon');
        $("#tab li").removeClass('select');
        $(this).addClass('select')
    });
});

sliderの方のJava Scriptは
$(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 200,
    minSlides: 3,
    maxSlides: 3,
    slideMargin: 10,
  });
});

以上です。

まだまだ知識も浅く、Java Scriptに関しては特に勉強不足で、いつもJqueryを手探りで実装している状態です。
この文章で質問事項もしっかりと伝わっているのか不安ですが、どなたかアドバイスお願いできますでしょうか。

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


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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+3

$(function () {});

は、「HTMLが読み込み完了された時に実行する」という意味ですが、display:none に設定されたものは「存在していない」ことと同義です。つまり、タブの2番目以降は、存在していないので、そこに bxSlider は生成されません。

2番目以降のタブにbxSlider を生成するには、display:none をスライダー生成後に設定するか、タブの切り替えのタイミングで生成するという方法で対処します。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
            <title>タブテスト</title>
            <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_common/sp_style.css" />
            <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_index/tab.css" />
            <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_common/jquery.bxslider.css" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script src="http://www.lyckatill.jp/ltr_www/js/jquery.bxslider.min.js"></script>
    </head>

    <body>

        <ul id="tab">
            <li class="select">総合</li>
            <li>トップス</li>
            <li>ボトムス</li>
        </ul>

        <!--rank01-->
        <div class="content_wrap">

            <div class="bx-wrapper">
                <div class="bx-viewport">

                    <div class="slider1">
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                    </div>

                </div><!--//bx-viewport-->
            </div><!--//bx-wrapper-->
        </div><!--//content_wrap-->

        <!--rank02-->
        <div class="content_wrap">

            <div class="bx-wrapper">
                <div class="bx-viewport">

                    <div class="slider1">
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                    </div>

                </div><!--//bx-viewport-->
            </div><!--//bx-wrapper-->
        </div><!--//content_wrap-->


        <!--rank03-->
        <div class="content_wrap">

            <div class="bx-wrapper">
                <div class="bx-viewport">

                    <div class="slider1">
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                        <div class="slide">
                            <img src="http://dummyimage.com/320x240" />
                        </div>
                    </div>

                </div><!--//bx-viewport-->
            </div><!--//bx-wrapper-->
        </div><!--//content_wrap-->

        <script type="text/javascript">
            $(function () {

                $("#tab li").on('click', function () {
                    var num = $("#tab li").index(this);
                    $(".content_wrap").addClass('disnon')
                            .eq(num)
                            .removeClass('disnon');
                    $("#tab li").removeClass('select');
                    $(this).addClass('select');
                });

                $('.slider1').bxSlider({
                    slideWidth: 200,
                    minSlides: 3,
                    maxSlides: 3,
                    slideMargin: 10
                });

                $("#tab li:first").click();

            });
        </script>
    </body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/10/14 17:21

    ご回答いただきまして、ありがとうございます。
    つまりは下記CSSが問題ということでしょうか。

    .disnon {
    display: none;
    }

    2番目以降のタブにbxSlider を生成するには、display:none をスライダー生成後に設定するか、タブの切り替えのタイミングで生成するという方法で対処します。
    >こちらは具体的にどこに何を記述する良いのでしょうか。
     知識不足でお手数をおかけしまして申し訳ありませんが…アドバイスいただけますと幸いです。

    キャンセル

  • 2015/10/14 17:43

    タブにどんなスクリプトを使っているのかなど、情報が不足しているので具体的な回答ができません。
    まずは、こちらで現象を再現できる(あなたの手元で起こっている現象をそのまま再現できる)ミニマムソースを提示してください。

    こちらでコピペすればそのまま再現できる状態で。

    キャンセル

  • 2015/10/14 22:51 編集

    何度もありがとうございます。
    ミニマムソースとなっているかわかりませんが、こちらでご確認いただけますでしょうか。

    ```HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
    <html xmlns="http://www.w3.org/1999/xhtml&quot;&gt;
    <head>
    <meta charset="utf-8">
    <title>タブテスト</title>
    <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_common/sp_style.css&quot; />
    <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_index/tab.css&quot; />
    <link rel="stylesheet" href="http://www.lyckatill.jp/ltr_www/sp_common/jquery.bxslider.css&quot; />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
    <script src="http://www.lyckatill.jp/ltr_www/js/jquery.bxslider.min.js&quot;&gt;&lt;/script&gt;

    </head>

    <body>

    <ul id="tab">
    <li class="select">総合</li>
    <li>トップス</li>
    <li>ボトムス</li>
    </ul>

    <!--rank01-->
    <div class="content_wrap">

    <div class="bx-wrapper">
    <div class="bx-viewport">

    <div class="slider1">
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    </div>

    </div><!--//bx-viewport-->
    </div><!--//bx-wrapper-->
    </div><!--//content_wrap-->

    <!--rank02-->
    <div class="content_wrap disnon">

    <div class="bx-wrapper">
    <div class="bx-viewport">

    <div class="slider1">
    <div class="slide">
    <img src="sp_index/img/thumb02.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb02.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb02.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb02.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb02.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb02.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb02.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb02.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb02.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb02.jpg" />
    </div>
    </div>

    </div><!--//bx-viewport-->
    </div><!--//bx-wrapper-->
    </div><!--//content_wrap-->


    <!--rank03-->
    <div class="content_wrap disnon">

    <div class="bx-wrapper">
    <div class="bx-viewport">

    <div class="slider1">
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    <div class="slide">
    <img src="sp_index/img/thumb01.jpg" />
    </div>
    </div>

    </div><!--//bx-viewport-->
    </div><!--//bx-wrapper-->
    </div><!--//content_wrap-->

    <script type="text/javascript">
    $(function() {
    $("#tab li").click(function() {
    var num = $("#tab li").index(this);
    $(".content_wrap").addClass('disnon');
    $(".content_wrap").eq(num).removeClass('disnon');
    $("#tab li").removeClass('select');
    $(this).addClass('select')
    });
    });
    </script>

    <script type="text/javascript">
    $(document).ready(function(){
    $('.slider1').bxSlider({
    slideWidth: 200,
    minSlides: 3,
    maxSlides: 3,
    slideMargin: 10,
    });
    });
    </script>
    ```

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

    キャンセル

  • 2015/10/15 00:34

    回答に追記しました

    キャンセル

  • 2015/10/15 13:16

    遅くなりました。
    ご丁寧に回答していただき、本当にありがとうございます!
    実装してみたら、2つ目以降も出てきました。とても助かりました!

    これだけお答えいただき大変失礼なのですが、、、
    まだたまに出てこない時も発生するようなのですが(こちらの問題でしょうか。。)別の書き方もあったりしますでしょうか。
    何度も申し訳ありません。

    キャンセル

  • 2015/10/15 13:37

    でも、まず根本的な問題が解決しましたのでベストアンサーとさせていただきました。
    Java Scriptもっと習得していきたいと思います。ありがとうございます。

    キャンセル

  • 2015/10/15 14:55

    > まだたまに出てこない時も発生する

    タブと他のJavacriptを使った機能の相性は悪いです。bxSliderに限った話ではありません。

    https://teratail.com/questions/2984

    > 別の書き方もあったりしますでしょうか。
    bxSlider に 使えそうなメソッドがないか探してみましたけど、なかったですね。

    タブで表示されることを想定してゼロベースでプラグインを描き起こせば、できなくはないでしょうけど、ボランティアでやる作業量ではないですね…。

    キャンセル

  • 2015/10/15 16:40

    回答ありがとうございます。
    相性が悪いのですね、色々と勉強不足で申し訳ありません。

    しかもメソッドを新たに探していただきまして、ありがとうございます。
    ここまで形になっただけでも本当に助かりました。
    お時間いただきまして、ありがとうございました。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20415questions

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

  • HTML

    11507questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8157questions

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

  • CSS

    7553questions

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