二つのbxsliderをレスポンシブで表示・非表示切り替えたい

現在、一つのページに二つのbxsliderを作成し二つとも表示されています。

これをウィンドウサイズが736以上はスライダーＡのみ、736以下はスライダーＢのみ表示させようとしています。二つのスライダーをcontainer_1、container_2と囲み、jquery.bxslider.cssの最後に下記追加致しましたが、二つとも表示されています。

//HTML
<div id="container_1">//スライダーA　736以上のみ表示したい
　<div class="bxslider1">
　省略
　</div>
</div>
<div id="container_2">//スライダーB　736以下のみ表示したい
　<div class="bxslider2">
　省略
　</div>
</div>

//CSS
.container_1{
display:block;
}
.container_2{
display:none;
}
@media screen and (max-width: 736px) {
.container_1{
display:none;
}
.container_2{
display:block;
}
}

http://reiwinn-web.net/2016/09/16/bxslider/
を見てみるとjavascriptで振り分けるように記載されていたのでcontainer_1、container_2を消し、以下のようにしてみましたが、二つとも表示されています。何か解消方法ございましたら教えて頂きたくよろしくお願い致します。

$(function() {
var slider1 = $(" .bxslider1").bxSlider({
mode:'fade',
speed:'30',
adaptiveHeight:'true',
video:'true',
responsive:'true',
infiniteLoop:'true',
});

var slider2 = $(" .bxslider2").bxSlider({
mode:'horizontal',
auto:'true',
adaptiveHeight:'true',
responsive:'true',
infiniteLoop:'true',
});

function sliderSetting(){
var width = $(window).width();
if(width <= 736){
slider2.reloadSlider();
//alert('slider2');
}else{
slider1.reloadSlider();
//alert('slider1');
}
}
sliderSetting();
});

No.1 ベストアンサー 回答者： t_fumiaki 回答日時： 2018/02/19 17:23

ケアレスミスですよ。

CSSでの単純ミス

id="container_1"、id="container_1"って記述してるから、CSSはIDセレクタにしないとね。(先頭は.では無く#)

.container_1{display:block;}
↓
#container_1{display:block;}

以下同じ

この回答へのお礼

おー！！！
ありがとうございます。
勝手に複雑な道を歩んでいくところでした。ちゃんと見直さなければですね。
CSSのカテゴリに最初質問したのですが、調べていくうちにCSSではなかったとカテゴリを移動したところでした。
(でもこちらに移動したらすぐに返信頂けました。感謝です。。。)
お騒がせしました。そして早々にありがとうございました！

お礼日時：2018/02/19 17:32