Bootstrap轮播多个图像响应窗口resize

我正在创建一个引导旋转木马，它在“小”屏幕尺寸上并排显示两个图像，并且只显示“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)); } }); 

我的网站在这里

编辑： 这是一个bootply 。 问题是当从小到大调整时只显示一个图像，并且当从大到小resize时，图像会在彼此之下。 它适用于所有大小的页面加载。

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，我立即调用多个图像function

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

在窗口resize时，如果尚未运行并且窗口为768px或更高，我只调用多function。 如果已经调用了多个函数并且窗口宽度小于768px，则调用undo函数。

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

演示