function handlePX() {
let swiperInstance = null;
return function (status) {
console.log(status);
if (swiperInstance) {
swiperInstance.update({
slidesPerView: status == "pc" ? 1.354 : 1.253,
coverflowEffect:
status == "pc"
? {
rotate: 0,
stretch: "45%",
depth: 500,
// modifier: 2,
slideShadows: false,
}
: {
rotate: 90,
stretch: "34%",
depth: 500,
// modifier: 2,
slideShadows: false,
},
});
} else {
swiperInstance = new Swiper(".swiper", {
init: true,
initialSlide: 1, //开始时显示哪个slid
centeredSlidesBounds: true,
slidesPerView: status == "pc" ? 1.354 : 1.253,
centeredSlides: true,
on: {
slideChangeTransitionEnd: function () {
//console.log(this.activeIndex - 4); //切换结束时,告诉我现在是第几个slide,循环模式下需要计算
document.getElementById("slidTitle").innerHTML =
text[this.activeIndex - 4].title;
document.getElementById("slidText").innerHTML =
text[this.activeIndex - 4].text;
// console.log(document.getElementById("slidText"));
},
//data-swiper-slide-index
},
loop: true, // 循环模式选项
loopAdditionalSlides: 1,
// autoplay: true,
preventClicksPropagation: false, //拖动时阻止click事件
effect: "coverflow",
grabCursor: true, //鼠标变成手掌
resizeObserver: true,
coverflowEffect:
status == "pc"
? {
rotate: 0,
stretch: "45%",
depth: 500,
// modifier: 2,
slideShadows: false,
}
: {
rotate: 0,
stretch: "34%",
depth: 1000,
// modifier: 2,
slideShadows: false,
},
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
hiddenClass: "my-button-hidden",
},
});
}
return swiperInstance;
};
}
let swiperCreate = handlePX();
var width = document.body.clientWidth;
// var swiperInstance = handlePX;
if (width >= 750) {
swiperCreate("pc");
} else {
swiperCreate("phone");
}
window.onresize = function () {
const lastWidth = width;
const nowWidth = document.body.clientWidth;
if (lastWidth < 750 && nowWidth >= 750) {
swiperCreate("pc");
} else if (lastWidth >= 750 && nowWidth < 750) {
swiperCreate("phone");
}
width = nowWidth;
};
const width = window.innerWidth;
const height = window.innerHeight;