Swiper Carousel:如何为不同屏幕尺寸的同一个 carousel 赋予不同的属性
Swiper Carousel: How to give different properties to the same carousel for different screen sizes
我正在尝试创建一个轮播,在桌面上具有 4x1 布局,在移动设备上具有 2x2 布局。
这是代码,但它只是破坏了轮播。
var swiper1;
$(window).resize(function() {
var ww = $(window).width();
if (ww <= 767) {
swiper1 = new Swiper('#swiper2', {
slidesPerView: 2,
slidesPerColumn: 2,
spaceBetween: 10
}
);
}
else {
swiper1 = new Swiper('#swiper2', {
slidesPerView: 4,
slidesPerColumn: 1,
spaceBetween: 30
}
);
}
});
原来代码是这样的:
var swiper1 = new Swiper('#swiper2', {
slidesPerView: 4,
slidesPerColumn: 1,
spaceBetween: 30
});
这对我有用,但我希望在分辨率 <= 767 时将其更改为 2x2
在创建新实例之前,您必须销毁旧的 Swiper 实例。在 Swiper API Docs 中,方法部分包含有关 Swiper 的销毁方法的信息。在你的情况下,你会想这样称呼它:swiper1.destroy(true, true);
.
您更新后的 javascript 可能如下所示:
$(function () {
createSwiper();
$(window).resize(function () {
createSwiper()
});
});
function createSwiper() {
var swiper1 = $('#swiper2')[0].swiper;
if (typeof swiper1 !== 'undefined')
swiper1.destroy(true, true); //if swiper exists, destroy it so we can create a new one
var ww = $(window).width();
if (ww <= 767) {
swiper1 = new Swiper('#swiper2', {
slidesPerView: 2,
slidesPerColumn: 2,
spaceBetween: 10
});
} else {
swiper1 = new Swiper('#swiper2', {
slidesPerView: 4,
slidesPerColumn: 1,
spaceBetween: 30
});
}
}
我将创建滑动器逻辑放在它自己的函数中,并在页面加载时调用它,并将它附加到 window 调整大小事件。
这是一个 Fiddle,因此您可以看到它的实际效果(调整框架大小 window)。
根据文档,您现在可以使用断点为不同的屏幕尺寸提供不同的参数。由于 Swiper Docs 没有锚点,请在 "Swiper Parameters" 部分搜索 "Breakpoints"。
你的情况是:
var swiper1 = new Swiper('#swiper2', {
slidesPerView: 2,
slidesPerColumn: 2,
spaceBetween: 10
// ...
breakpoints: {
// when window width is >= 767px
767: {
slidesPerView: 4,
slidesPerColumn: 1,
spaceBetween: 30,
}
}
});
注意:文档显示在断点内您只能使用一部分参数,不会显着改变轮播行为。
我正在尝试创建一个轮播,在桌面上具有 4x1 布局,在移动设备上具有 2x2 布局。
这是代码,但它只是破坏了轮播。
var swiper1;
$(window).resize(function() {
var ww = $(window).width();
if (ww <= 767) {
swiper1 = new Swiper('#swiper2', {
slidesPerView: 2,
slidesPerColumn: 2,
spaceBetween: 10
}
);
}
else {
swiper1 = new Swiper('#swiper2', {
slidesPerView: 4,
slidesPerColumn: 1,
spaceBetween: 30
}
);
}
});
原来代码是这样的:
var swiper1 = new Swiper('#swiper2', {
slidesPerView: 4,
slidesPerColumn: 1,
spaceBetween: 30
});
这对我有用,但我希望在分辨率 <= 767 时将其更改为 2x2
在创建新实例之前,您必须销毁旧的 Swiper 实例。在 Swiper API Docs 中,方法部分包含有关 Swiper 的销毁方法的信息。在你的情况下,你会想这样称呼它:swiper1.destroy(true, true);
.
您更新后的 javascript 可能如下所示:
$(function () {
createSwiper();
$(window).resize(function () {
createSwiper()
});
});
function createSwiper() {
var swiper1 = $('#swiper2')[0].swiper;
if (typeof swiper1 !== 'undefined')
swiper1.destroy(true, true); //if swiper exists, destroy it so we can create a new one
var ww = $(window).width();
if (ww <= 767) {
swiper1 = new Swiper('#swiper2', {
slidesPerView: 2,
slidesPerColumn: 2,
spaceBetween: 10
});
} else {
swiper1 = new Swiper('#swiper2', {
slidesPerView: 4,
slidesPerColumn: 1,
spaceBetween: 30
});
}
}
我将创建滑动器逻辑放在它自己的函数中,并在页面加载时调用它,并将它附加到 window 调整大小事件。
这是一个 Fiddle,因此您可以看到它的实际效果(调整框架大小 window)。
根据文档,您现在可以使用断点为不同的屏幕尺寸提供不同的参数。由于 Swiper Docs 没有锚点,请在 "Swiper Parameters" 部分搜索 "Breakpoints"。
你的情况是:
var swiper1 = new Swiper('#swiper2', {
slidesPerView: 2,
slidesPerColumn: 2,
spaceBetween: 10
// ...
breakpoints: {
// when window width is >= 767px
767: {
slidesPerView: 4,
slidesPerColumn: 1,
spaceBetween: 30,
}
}
});
注意:文档显示在断点内您只能使用一部分参数,不会显着改变轮播行为。