Мобильный ответный код с использованием кода JS

Question

Я не понимаю, как сделать 3 изображения столбцов в 2 столбцах на мобильном телефоне. Я обнаружил, что есть проблема с JS. В JS существует условие minslide: 3 и maxslide: 3 ...

Так что в мобильном телефоне также показано 3 слайда .. как сделать его видимым в 2 слайдерах. Я имею в виду в 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

Brute, но, вероятно, самый простой обходной путь будет включать в себя медиа-запросов в зависимости JavaScript, и вызывать различные настройки bxslider зависит от ширины:

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

ИЛИ:

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