Can someone please tell me is there any other way that i can remove my whole swiper when my slides gets completed and allow regular scrolling and when i scroll back to swiper slides it will again active and when i reached at first slide it will again remove and i am able to scroll up.
const swiperContainer = document.querySelector(".swiper-container");
let swiper = null; // Initialize swiper as null
// Function to enable or disable the swiper and window scroll
function toggleSwiper(enable) {
if (enable) {
swiper = new Swiper('.swiper-container', {
direction: 'vertical',
effect: 'creative',
mousewheel: true, // Enable mousewheel when enable is true
speed: 1000,
slidesPerView: 1,
pagination: {
el: '.swiper-pagination',
clickable: true
}
});
} else if (swiper !== null) {
swiper.destroy(true, true);
swiper = null;
}
}
// Function to check the scroll position and toggle the swiper
function checkScrollPosition() {
const containerRect = swiperContainer.getBoundingClientRect();
const swiperSlider = document.querySelectorAll(".swiper-slide");
if (containerRect.top <= 0) {
toggleSwiper(true); // Enable swiper
document.body.style.overflow = "hidden"; // Disable window scrolling
function activeScroll() {
// console.log(swiperSlider.length)
if(swiperSlider.length <= 3){
toggleSwiper(true);
document.body.style.overflow = "hidden";
console.log("this is disable now")
}
else if(swiperSlider.length === 3){
toggleSwiper(true);
document.body.style.overflow = "auto";
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);
// Initial check to enable/disable swiper based on the initial scroll position
checkScrollPosition();
Thank You!.