使用JS代码的移动响应

我不明白如何在移动设备上创建2列3列图像。我发现JS存在一个问题。在JS有minslide的条件：3和maxslide：3 ...使用JS代码的移动响应

因此，在移动也显示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 -->

来源

2017-02-10 Sagar Doddapaneni

想过用http://getbootstrap.com/的？ –

** 1）**确保您的Stack Snippet实际上提供了一个工作演示，而您的演示不支持。 ** 2）**您正在使用第三方库创建图像滑块，您应该提及这一点。 – hungerstar

另外，你为什么不把'minSlides'设置为'2'？这个[bxSlider demo]（http://bxslider.com/examples/carousel-dynamic-number-slides）清楚地表明它将使用较小视口的minSlides值和较大视口的maxSlides值。 – hungerstar

蛮力，但可能是最简单的解决方法是将包括媒体查询相关的JavaScript，并触发依赖于宽度不同bxslider设置：

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

OR：

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

来源

2017-02-10 18:27:32

使用JS代码的移动响应

回答

相关问题