引导轮播多个图像响应于窗口调整大小 [英] Bootstrap carousel multiple images responsive on window resize

问题描述

我正在创建一个自举轮播，它在小"屏幕尺寸或以上并排显示两个图像，而在"x-小"设备上仅显示一个图像.

I am creating a bootstrap carousel that shows two images side by side on 'small' screen sizes and up, and only shows one image on 'x-small' devices.

我已经使用并修改了此bootply 并排获得两个图像，而我正在使用$(window).width()检测窗口大小.当您以设定的宽度加载页面时，它可以正常工作，但是我无法在调整窗口大小时使用它.我尝试放入

I have used and modified this bootply to get the two images side by side, and I am using $(window).width() to detect the window size. It works fine when you load the page at a set width, but I can't get it to work on window resize. I have tried putting in

$(window).resize(function() {
   width = $(window).width();
});

但这似乎不起作用.

这是我到目前为止的代码:

Here's the code I have so far:

$('.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's a bootply. The problem is when resizing from small to big only one image is displayed, and when resizing from big to small the images go underneath each other. It works correctly on page load at all sizes though.

推荐答案

我设法完成了这项工作.我创建了两个函数，一个将下一张图像添加到轮播中的每个项目，另一个删除那些克隆的图像.

I have managed to make this work. I have created two functions, one which appends the next image to each item in the carousel and one which removes those cloned images.

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 the window is greater than 768px on load I call the multiple images function right away

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

在调整窗口大小时，我仅在尚未运行且窗口大于或等于768px时才调用multi函数.如果已经调用了多重函数并且窗口宽度小于768px，我将调用undo函数.

On window resize I only call the multiple function if it hasn't already been run and the window is 768px or greater. I call the undo function if the multiple function has already been called and the window width is less than 768px.

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

演示

这篇关于引导轮播多个图像响应于窗口调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！