モバイル版ではbx-sliderを非表示に、タブレット以降はsliderというふうにしたいです。
具体的に、767pxまでdisplay:none;、768px以降は通常のbx-sliderといった感じです。
下記にコード載せておきます。
html
1 <!--スライダー--> 2 <ul class="bxslider"> 3 <li> 4 <img src='img/slider1.png' alt='' 5 width='960px' height='450px' class='slider_img'> 6 </li> 7 <li> 8 <img src='img/slider2.png' alt='' 9 width='960px' height='450px' class='slider_img'> 10 </li> 11 <li> 12 <img src='img/slider3.png' alt='' 13 width='960px' height='450px' class='slider_img'> 14 </li> 15 <li> 16 <img src='img/slider4.png' alt='' 17 width='960px' height='450px' class='slider_img'> 18 </li> 19 </ul><!--#bxslider-->
javascript
1$(function(){ 2if(window.matchMedia('(max-width:768px)').matches){ 3 $('.bxslider').css({'display':'none'}); 4} else { 5 $('.bxslider').bxSlider({ 6 auto:true, 7 speed:3000, 8 mode:'fade', 9 pause: 6000, 10 }); 11 } 12});
上記のような場合、sliderは通常通り表示されるのですが、768px以下が下記の画像のようになってしまいます。この場合、jqueryの記述を消せばいいんでしょうか?
jquery、javascriptの記述に慣れていないので、アドバイスいただけると助かります。
追記
javascript
1$(function(){ 2if(window.matchMedia('(max-width:768px)').matches){ 3 $('.bxwrapper').css({'display':'none'}) 4} else { 5 $('.bxwrapper').css({'display':'block'}); 6 $('.bxslider').bxSlider({ 7 auto:true, 8 speed:3000, 9 mode:'fade', 10 pause: 6000, 11 }); 12 } 13});
回答1件
あなたの回答
tips
プレビュー