Question

所以，bxslider工作得很好并且响应很快，直到我尝试设置多张幻灯片（3）以获得更广泛的分辨率。一旦我尝试设置minslide和maxslide选项，一切都保持不变。

我尝试过这个基本的条件代码

if ($(window).width() < 600) {
    $('.prodslide').bxSlider();
} else {
    $('.prodslide').bxSlider({
        minSlides: 3,
        maxSlides: 3
    });
}

我也查找了某个版本，其变量看起来像这样

var slidesvar;
if ($(window).width() < 600) {
  slidesvar = 1;
} else {
    slidesvar = 3;
}


$('.prodslide').bxSlider({
   minSlides: slidesvar,
   maxSlides: slidesvar
});

都没有效果。

我在控制台中遇到的唯一错误是google doubleclick相关。

Answer 1

如果您使用的是默认mode: carousel，那么您也设置了slideWidth。如果您想要一个600px的断点，那么设置slideWidth: 200。

var bx = $('.bx').bxSlider({
  minSlides: 1,
  maxSlides: 3,
  slideWidth: 200,
  shrinkItems: true
});

<link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet">

<ul class='bx'>
  <li><img src='http://lorempixel.com/200/200/people/1'></li>
  <li><img src='http://placehold.it/200x200/000/fff?text=2'></li>
  <li><img src='http://lorempixel.com/200/200/people/2'></li>
  <li><img src='http://placehold.it/200x200/0ff/000?text=4'></li>
  <li><img src='http://lorempixel.com/200/200/people/3'></li>
  <li><img src='http://placehold.it/200x200/83d800/000?text=6'></li>
  <li><img src='http://lorempixel.com/200/200/people/4'></li>
  <li><img src='http://placehold.it/200x200/f7a/000?text=8'></li>
  <li><img src='http://lorempixel.com/200/200/people/5'></li>
  <li><img src='http://placehold.it/200x200/fc0/000?text=10'></li>
  <li><img src='http://lorempixel.com/200/200/people/7'></li>
  <li><img src='http://placehold.it/200x200/f00/fff?text=12'></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js'></script>

使用BXslider的minslide和maxslide制作响应式滑块

1 个答案: