現在、一つのページに二つのbxsliderを作成し二つとも表示されています。
これをウィンドウサイズが736以上はスライダーAのみ、736以下はスライダーBのみ表示させようとしています。二つのスライダーを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ベストアンサー
- 回答日時:
ケアレスミスですよ。
CSSでの単純ミス
id="container_1"、id="container_1"って記述してるから、CSSはIDセレクタにしないとね。(先頭は.では無く#)
.container_1{display:block;}
↓
#container_1{display:block;}
以下同じ
おー!!!
ありがとうございます。
勝手に複雑な道を歩んでいくところでした。ちゃんと見直さなければですね。
CSSのカテゴリに最初質問したのですが、調べていくうちにCSSではなかったとカテゴリを移動したところでした。
(でもこちらに移動したらすぐに返信頂けました。感謝です。。。)
お騒がせしました。そして早々にありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
迷路探索プログラムを作るには...
-
カンマ区切りのデータを配列に...
-
JQueryでAjax通信をキャンセル...
-
readyStateが4にならない原因
-
フレーム内の要素へのXPATHはど...
-
[jQuery UI] sortableを使いaja...
-
JavascriptからPHPへのAjax通信...
-
jQuery toggle() 戻るで開いた...
-
階層別の組織図の自動作成について
-
要素内を常に一番下を表示させたい
-
IndexedDB を使ってファイルア...
-
.txtファイルの読み込み
-
スクリプトの外部からの読み込み
-
bxsliderで画像毎に表示時間を...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
SQLのmaxで求めた値を変数に代...
-
FullCalendar の複数月表示につ...
-
メールを送信するボタンでOutlo...
-
日付が変わると自動更新
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
カンマ区切りのデータを配列に...
-
二つのbxsliderをレスポンシブ...
-
たくさんの経由地がある巡回ル...
-
迷路探索プログラムを作るには...
-
C言語の 配列の中 出力について
-
google maps api v3のルート検索
-
Google Maps:同マップ内でそれ...
-
Googleストリートビューの写真...
-
webサービス上のkmlをgooglemap...
-
Googleマップのウィンドウの表示
-
Haskellのsubtractについて
-
google maps 吹き出しカウント...
-
数字をピクチャボックスの上に...
-
GoogleMapの移動量
-
GoogleMapでアイコンを500件表...
-
googleマップが表示されない。
-
グーグルマップにマーカーを色...
-
ドラッグ & ドロップでのド...
-
JavascriptからPHPへのAjax通信...
-
階層別の組織図の自動作成について
おすすめ情報