var mySwiper = new Swiper(".banner_swiper", {
direction: "vertical",
autoHeight: true,// 让 Swiper 根据当前轮播项的内容自动调整容器高度
loop:true,
autoplay: {
delay: 3000,
},
pagination: {
el: ".home-banner-index .swiper-pagination",
clickable: true,
},
on:{
init:function(){
setSlideHeight(this);// 初始化时设置轮播项高度
},
slideChangeTransitionEnd:function(){
setSlideHeight(this);// 轮播项切换后设置轮播项高度
}
}
});
function setSlideHeight(that){
$('.home-banner-index .swiper-slide').css({height:'auto'});// 将所有轮播项的高度设为auto
var currentSlide = that.activeIndex;// 获取当前活动轮播项的索引
var newHeight = $(that.slides[currentSlide]).height();// 获取当前活动轮播项的高度
$('.home-banner-index .swiper-wrapper,.home-banner-index .swiper-slide').css({ height : newHeight })// 设置轮播容器和轮播项的高度为新高度
that.update();// 更新 Swiper 实例,确保高度生效
}
swiper的垂直轮播高度问题
最新推荐文章于 2024-07-14 12:56:18 发布