JSコードを使用したモバイルレスポンス

Question

携帯で2列に3つの画像列を作成する方法がわかりません。私はJSに問題があることを発見しました。 JSではminslide：3とmaxslide：3の条件があります。

モバイルでも3スライドを表示しています。2スライダーで表示する方法を教えてください。 。

$j('#slider-collection-product .slides').bxSlider({ 
 
    auto: false, 
 
    pager: false, 
 
    responsive: true, 
 
    slideWidth: 500, 
 
    slideMargin: 50, 
 
    minSlides: 3, 
 
    maxSlides: 3, 
 
    moveSlides: 3 
 
});

<div class="category-body sub_category_16"> 
 
    <div class="slider slider-category"> 
 
    <div class="slider-clip"> 
 
     <div class="bx-wrapper" style="max-width: 1248px;"> 
 
     <div class="slider" id="slider-collection-product"> 
 
      <div class="slider-clip" style="width:100%;"> 
 
      <ul class="slides"> 
 
       <li class="slide"> 
 
       <div class="slide-image"> 
 
        <a href="#"> 
 
        <img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette"> 
 
        </a> 
 
       </div> 
 
       <div class="slide-content"> 
 
        <h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4> 
 
        <p class="slide-price">€1,650 - €1,700</p> 
 
        <div class="promo_text"></div> 
 
       </div> 
 
       </li> 
 
       <li class="slide"> 
 
       <div class="slide-image"> 
 
        <a href="#"> 
 
        <img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette"> 
 
        </a> 
 
       </div> 
 
       <div class="slide-content"> 
 
        <h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4> 
 
        <p class="slide-price">€1,650 - €1,700</p> 
 
        <div class="promo_text"></div> 
 
       </div> 
 
       </li> 
 
       <li class="slide"> 
 
       <div class="slide-image"> 
 
        <a href="#"> 
 
        <img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette"> 
 
        </a> 
 
       </div> 
 
       <div class="slide-content"> 
 
        <h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4> 
 
        <p class="slide-price">€1,650 - €1,700</p> 
 
        <div class="promo_text"></div> 
 
       </div> 
 
       </li> 
 
       <li class="slide"> 
 
       <div class="slide-image"> 
 
        <a href="#"> 
 
        <img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette"> 
 
        </a> 
 
       </div> 
 
       <div class="slide-content"> 
 
        <h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4> 
 
        <p class="slide-price">€1,650 - €1,700</p> 
 
        <div class="promo_text"></div> 
 
       </div> 
 
       </li> 
 
       <li class="slide"> 
 
       <div class="slide-image"> 
 
        <a href="#"> 
 
        <img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette"> 
 
        </a> 
 
       </div> 
 
       <div class="slide-content"> 
 
        <h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4> 
 
        <p class="slide-price">€1,650 - €1,700</p> 
 
        <div class="promo_text"></div> 
 
       </div> 
 
       </li> 
 
       <li class="slide"> 
 
       <div class="slide-image"> 
 
        <a href="#"> 
 
        <img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette"> 
 
        </a> 
 
       </div> 
 
       <div class="slide-content"> 
 
        <h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4> 
 
        <p class="slide-price">€1,650 - €1,700</p> 
 
        <div class="promo_text"></div> 
 
       </div> 
 
       </li> 
 
      </ul> 
 
      <!-- /.slides --> 
 
      </div> 
 
      <!-- /.slider-clip --> 
 
     </div> 
 
     <!-- /.slider --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- /.category-body -->

Answer 1

ブルートおそらく最も簡単な回避策は、メディアクエリ依存JavaScriptを含み、かつ幅に依存して異なるbxslider設定をトリガするために、次のようになります。

if (document.documentElement.clientWidth < 900) { 
    // scripts 
} 

OR：あなたはhttp://getbootstrap.com/を使用して考え

var mq = window.matchMedia('@media all and (max-width: 700px)'); 
if(mq.matches) { 
    // the width of browser is more then 700px 
} else { 
    // the width of browser is less then 700px 
} 

Media Queries & javascript from sitepoint

Media Queries & javascript from modernweb