当我将 swiper 旋转 90 度时，我正在努力改变滑动方向。所以在默认情况下，它在开始时具有水平方向。单击幻灯片时，我正在旋转“swiper-container”使其全屏显示。所以它仍然有从左到右的滑动方向，但我需要从上到下改变而不改变参数方向到垂直。
const topSwiper = new Swiper(this.DOMTopSwiper.current, {
spaceBetween: 0,
observer: true,
observeParents: true,
observeSlideChildren: true,
direction: "vertical",
navigation: {
nextEl: ".top-swiper-button-next",
prevEl: ".top-swiper-button-prev",
},
pagination: {
el: ".zoom-amount-slides",
type: "fraction",
},
})
试试我的解决方案。
//Tested in Swiper 7.2.0
/**
* Insert to your page
*/
var rotate90Swiper = (function (swiper, optIsRotate90) {
var isRoate90 = !!optIsRotate90
swiper.___touches = {}
swiper.___touches.currentX = swiper.touches.currentX
Object.defineProperty(swiper.touches, 'currentX', {
set: function (v) {
if (!isRoate90) {
swiper.___touches.currentX = v
} else {
swiper.___touches.currentY = v
}
},
get: function () {
return swiper.___touches.currentX
}
})
swiper.___touches.currentY = swiper.touches.currentY
Object.defineProperty(swiper.touches, 'currentY', {
set: function (v) {
if (!isRoate90) {
swiper.___touches.currentY = v
} else {
swiper.___touches.currentX = v
}
},
get: function () {
return swiper.___touches.currentY
}
})
return function (b) {
isRoate90 = b
}
})
/**
* How to use
*/
var setRotate90 = rotate90Swiper(YourSwiperInstance, defaultIsRotate90)
setRotate90(false) // swiper rotate 90deg
setRotate90(true) //normal swiper