Swiper 滑块垂直滚动卡在幻灯片 1 上,但在水平滑动一次后工作正常
Swiper slider vertical scroll stucked on slide 1 but works well after swiping horizontally once
我正在做一个项目,在这个项目中我正在使用滑动滑块设计一个页面。在我的页面中,我有三个来自 swiper slider 的滑动器,它们用于水平滑动。每个刷卡器都包含动态内容。加载页面时,第一个滑动器位于视口中,而在垂直滚动时它会卡住。水平滑动一次后,垂直滚动现在可以正常工作了。我尝试使用 auto-height: true
来解决这个问题。
但是在应用上面的内容时,我在内容下方的滑动器 sheet 上留下了一个巨大的空白 space,我猜它来自三者中最大高度的滑动器 sheet。
JS:-
swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationType:'custom',
paginationCustomRender: function (swiper, current, total) {
if(current==1){
if(!$("#matches").hasClass("active")){
$("#matches").addClass("active");
$("#table").removeClass("active");
$("#latest").removeClass("active");
if($(document).find(".ns_position").length > 0){
$('html,body').animate({scrollTop: $(".ns_position").offset().top-130}, 'fast');
}
}
}else if(current==2){
if(!$("#table").hasClass("active")){
$("#table").addClass("active");
$("#matches").removeClass("active");
$("#latest").removeClass("active");
$(window).scrollTop(0);
}
}else if(current==3){
if(!$("#latest").hasClass("active")){
$("#latest").addClass("active");
$("#matches").removeClass("active");
$("#table").removeClass("active");
$(window).scrollTop(0);
}
}
},
lazyLoading:true,
autoHeight:true
});
HTML代码:-
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>
<div>
<div>
我通过自定义解决了css。
使用css:-
高度:100%,overflow:auto 在我卡在垂直滚动中的滑动滑动中。
我正在做一个项目,在这个项目中我正在使用滑动滑块设计一个页面。在我的页面中,我有三个来自 swiper slider 的滑动器,它们用于水平滑动。每个刷卡器都包含动态内容。加载页面时,第一个滑动器位于视口中,而在垂直滚动时它会卡住。水平滑动一次后,垂直滚动现在可以正常工作了。我尝试使用 auto-height: true
来解决这个问题。
但是在应用上面的内容时,我在内容下方的滑动器 sheet 上留下了一个巨大的空白 space,我猜它来自三者中最大高度的滑动器 sheet。
JS:-
swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationType:'custom',
paginationCustomRender: function (swiper, current, total) {
if(current==1){
if(!$("#matches").hasClass("active")){
$("#matches").addClass("active");
$("#table").removeClass("active");
$("#latest").removeClass("active");
if($(document).find(".ns_position").length > 0){
$('html,body').animate({scrollTop: $(".ns_position").offset().top-130}, 'fast');
}
}
}else if(current==2){
if(!$("#table").hasClass("active")){
$("#table").addClass("active");
$("#matches").removeClass("active");
$("#latest").removeClass("active");
$(window).scrollTop(0);
}
}else if(current==3){
if(!$("#latest").hasClass("active")){
$("#latest").addClass("active");
$("#matches").removeClass("active");
$("#table").removeClass("active");
$(window).scrollTop(0);
}
}
},
lazyLoading:true,
autoHeight:true
});
HTML代码:-
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>
<div>
<div>
我通过自定义解决了css。
使用css:-
高度:100%,overflow:auto 在我卡在垂直滚动中的滑动滑动中。