我正在创建一个引导程序转盘,它在"小"及以上屏幕上并排显示两个图像,在"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();
}
});
演示