swiper的垂直轮播高度问题

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 实例,确保高度生效
        }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值