javascript - 使用 JS 代码的移动响应

Question

我不明白如何在移动设备上将 3 个图像列分成 2 列。我发现JS有问题。在 JS 中有 minslide:3 和 maxslide:3 的条件...

因此在移动设备中它也显示 3 张幻灯片..如何使其在 2 个 slider 中可见..我的意思是在 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
}

或者:

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