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

初めまして。

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

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

■仕様したJquery【bxslider】
http://bxslider.com/


サイトのコード記述は下記の通りです。

HTML-------------------------------

<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">
※rank02同様
</div>

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


jquery.bxslider.cssはほぼダウンロードしたままを使用していますが、
タブに対する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は、

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は、

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

以上です。

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

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

No.2 ベストアンサー 回答者： fufufunofufufu 回答日時： 2015/10/15 17:38

●HTMLの<div class="content_wrap disnon">のdisnonを削除。

●jQueryは以下
<script>
$(function() {
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 3,
maxSlides: 3,
slideMargin: 10,
});
$(".content_wrap:not(:eq(0))").hide();
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").hide();
$(".content_wrap").eq(num).show();
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
</script>

【jQuery説明】
概要としては、スクリプトの実行の順序を変えるって感じで。
①まず最初にbxsliderを実行。
②その後にタブの非表示。
disnonを消したので代わりに、.content_wrapの1つ目以外を.hide()で隠す。
③それからタブのスクリプト。
disnon消したし、クラスdisnonにほかの役目がなさそうだったので、
タブの表示非表示を.hide()と.show()に変えましたが、もともとのaddClass,removeClassのままでも良いと思います。

あとセレクタで何度も出てくるものは代入したほうが良いかも。。この程度ならしなくてもほぼ速度変わらないと思いますが。。

※もしこれでうまく行かなかったら、②③はjＱueryじゃなくてjsのwindow.onload = function() {}で囲って試してください。あくまで順序のために実行タイミングを変えるだけですけど。

頑張ってください。

この回答へのお礼

回答ありがとうございます。
cssで非表示設定していたことがまず間違っていたのですね。

いただいたアドバイス通り設定しましたら、無事に２つ目以降も表示されました。
どこをどう記入したらいいかも分からなかった為、ご丁寧に説明までしていただき、とても助かりました。
本当にありがとうございます！

Java Scriptに関しては、これからもっと勉強をしていきたいと思います。
アドバイスいただきまして、ありがとうございました。

お礼日時：2015/10/15 21:31

No.1 回答者： fujillin 回答日時： 2015/10/15 15:55

ちゃんと追いかけてないので、半分想像の回答ですので申し訳ないのですが・・・

boxsliderの設定時に、関係要素が非表示だと要素サイズなどが取得できずに、設定がうまくできないのが原因ではないかと推測します。

以下の手順で設定してみてもうまくいかないでしょうか？
1）HTMLの初期表示状態は、CSS等で非表示としない。
　（特にタブなどを）
2）document.readyでboxsliderの設定を行う。

3）上記設定後に、初期状態で表示しないタブをスクリプトから非表示にする。

この回答へのお礼

回答ありがとうございます。

ご指摘いただいたように、cssで非表示設定していたことが根本の原因だったようです。
JavaScriptで具体的にどう設定したらよいかも分からい程知識不足でしたが、別の方より助言いただくことができ、無事に解決しました。

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

お礼日時：2015/10/15 21:24