Bootstrap轮播多个图像响应窗口调整大小答案

【问题标题】：Bootstrap carousel multiple images responsive on window resizeBootstrap轮播多个图像响应窗口调整大小
【发布时间】：2014-09-04 09:40:29
【问题描述】：

我正在创建一个引导轮播，它在“小”屏幕尺寸及以上尺寸上并排显示两个图像，并且只在“x-small”设备上显示一个图像。

我已经使用并修改了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。问题是当从小到大调整大小时，只显示一个图像，而当从大到小调整大小时，图像会在彼此下方。它在所有尺寸的页面加载时都能正常工作。

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案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
      }
    }
  ]
});

【讨论】：

【解决方案2】：

我已经成功地完成了这项工作。我创建了两个函数，一个将下一个图像附加到轮播中的每个项目，另一个删除那些克隆的图像。

run = false;
var multiple = function() {
  $('.carousel .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
         next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    run = true;
  });
};
var undo = function() {
  $('.carousel .item').each(function () {
    $(this).children().last().remove();
    run = false;
  });
};

如果加载时窗口大于 768px，我会立即调用多图像函数

if ($(window).width() > 768) {
  multiple();
};

在调整窗口大小时，我只在尚未运行且窗口为 768 像素或更大的情况下调用多个函数。如果已经调用了多个函数并且窗口宽度小于768px，我调用undo函数。

$(window).resize(function() {
  if (run==false && $(window).width() > 768) {
    multiple();
  } else if (run == true && $(window).width() < 768) {
    undo();
  }
});

Demo

【讨论】：