引導輪播多個圖像響應窗口調整大小

Question

我正在創建一個引導輪播，該輪播會在“小”屏幕尺寸及以上的尺寸上並排顯示兩個圖像，而在“ x小”設備上僅顯示一個圖像。

我已經使用並修改了該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));
  }
});

我的網站在這里

編輯： 這是一個bootply 。 問題是，當從小到大調整大小時，僅顯示一個圖像，而從大到小調整大小時，圖像位於彼此下方。 但是，它可以在所有大小的頁面加載時正常工作。

Answer 1

如果您不需要使用Bootstrap傳送帶，請看看Slick，這是您最后用過的傳送帶 。 您可以非常輕松地為自定義窗口大小定義斷點：

$('.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
      }
    }
  ]
});

Answer 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();
};

在調整窗口大小時，僅當尚未運行並且窗口大於或等於768px時，才調用多重函數。 如果已經調用了多重函數並且窗口寬度小於768px，我將調用undo函數。

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

演示