Bootstrap旋转木马可在窗口调整大小时响应多个图像

Bootstrap carousel multiple images responsive on window resize

本文关键字：响应 小时 图像 调整 旋转木马 窗口 Bootstrap      更新时间：2023-09-26

我正在创建一个引导程序转盘，它在"小"及以上屏幕上并排显示两个图像，在"x-small"设备上只显示一个图像。

我已经使用并修改了这个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));
  }
});

我的网站在这里

编辑：这是一个战利品。问题是，当从小到大调整大小时，只显示一个图像，而当从大到小时，图像会相互叠加。不过，它在所有大小的页面加载中都能正常工作。

如果您不需要使用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
      }
    }
  ]
});

我已经设法做到了。我创建了两个函数，一个是将下一个图像附加到转盘中的每个项目，另一个是删除那些克隆的图像。

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或更大的情况下调用multiple函数。如果已经调用了multiple函数，并且窗口宽度小于768px，则调用undo函数。

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

演示

相关文章：