提问人:Muhammad Sameer 提问时间:11/8/2023 最后编辑:James ZMuhammad Sameer 更新时间:11/9/2023 访问量:19
如何在特定条件下禁用 Swiper Slider?
How to disable Swiper Slider at specific condition?
问:
有可能在某个特定点我可以禁用滑动滑块,这意味着这种情况是当我在滑动块上滚动时,在幻灯片末尾到达后,我无法滚动我的窗口,所以请为我提供更好的解决方案来解决我的问题
const swiperContainer = document.querySelector(".swiper-container");
// Function to enable or disable the swiper and window scroll
function toggleSwiper(enable) {
const swiper = new Swiper('.swiper-container', {
direction: 'vertical',
effect: 'creative',
mousewheel: enable, // Enable mousewheel when enable is true
speed: 1000,
slidesPerView: 1,
pagination: {
el: '.swiper-pagination',
clickable: true
}
});
}
// Function to check the scroll position and toggle the swiper
function checkScrollPosition() {
const containerRect = swiperContainer.getBoundingClientRect();
if (containerRect.top <= 0) {
toggleSwiper(true); // Enable swiper
document.body.style.overflow = "hidden"; // Disable window scrolling
function activeScroll() {
const swiperSlider = document.querySelectorAll(".swiper-slide");
// console.log(swiperSlider.length)
if(swiperSlider.length <= 3){
toggleSwiper(true);
console.log("this is disable now")
}
else if(swiperSlider.length === 3){
toggleSwiper(true);
swiper.destroy(true, true)
console.log("this is enable now")
}
}
activeScroll()
} else {
toggleSwiper(false); // Disable swiper
document.body.style.overflow = "auto"; // Enable window scrolling
}
}
// Event listener for scrolling
window.addEventListener('scroll', checkScrollPosition);
checkScrollPosition();
答: 暂无答案
评论
releaseOnEdges: true