javascript - Bootstrap 轮播多个图像响应窗口大小调整

Question

我正在创建一个 Bootstrap 轮播，它在“小”屏幕尺寸及以上尺寸上并排显示两个图像，并且在“小”设备上仅显示一张图像。

我已经使用并修改了this bootply并排获取两个图像，我使用 $(window).width() 来检测窗口大小。当您以设定的宽度加载页面时，它工作正常，但我无法让它在窗口调整大小时工作。我尝试过输入

$(window).resize(function() {
   width = $(window).width();
});

但这似乎不起作用。

这是我到目前为止的代码:

$('.carousel .item').each(function () {
  width = $(window).width();
  if (width > 768) {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
  }
});

我的网站是here

编辑:here's a bootply 。问题是，当大小从小到大调整时，仅显示一张图像，而当大小从大调整到小时，图像会彼此重叠。不过，它在所有尺寸的页面加载上都能正常工作。

Answer 1

如果您不需要使用 Bootstrap 轮播，请查看 Slick- the last carousel you'll ever 。您可以非常轻松地为自定义窗口大小定义断点:​​

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});