如何在特定条件下禁用 Swiper Slider?

How to disable Swiper Slider at specific condition?

提问人:Muhammad Sameer 提问时间:11/8/2023 最后编辑:James ZMuhammad Sameer 更新时间:11/9/2023 访问量:19

问:

有可能在某个特定点我可以禁用滑动滑块,这意味着这种情况是当我在滑动块上滚动时,在幻灯片末尾到达后,我无法滚动我的窗口,所以请为我提供更好的解决方案来解决我的问题

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();
滑动.js 滚轮 禁用

评论

0赞 Ezra Siton 11/12/2023
你的Q不清楚:试试“ Mousewheel Control Parameters” => swiperjs.com/swiper-api#param-releaseOnEdgesreleaseOnEdges: true

答: 暂无答案