Question

我正在创建一个引导旋转木马，它可以并排显示两个小图像。屏幕尺寸和向上，只显示一个图像在＆＃39; x-small＆＃39;设备

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

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

Demo

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

2 个答案: