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

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 与双击相关。

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 制作响应式滑块

Making responsive slider with BXslider's minslide and maxslide

jquery

bxslider