Swiper使用fade过渡中遇到的问题
Swiper使用fade过渡中遇到的问题
木槿清 发表于8个月前
Swiper使用fade过渡中遇到的问题
  • 发表于 8个月前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 1.换效果 使用 fade 每个页面的大小不一样 2.回调偶尔触发

page 间切换效果 使用 fade 的时候,如果每个页面的大小不一样, 比如第一个页面全屏, 第二个页面比第一个小, 那么切换到第二页的时候, 第一页的内容还可以看到

还有,使用 fade 过渡方法,onSlideChangeEnd 回调偶尔触发,偶尔不触发。 因此使用 onTransitionEnd

解决方案:

  1. 添加 fade:{crossFade:true}
  2. 切换之后效果, 使用 onSlideChangeEnd(page切换后触发) 会偶尔不触发, 请使用 onTransitionEnd(过渡效果结束触发)
    window.galleryTop = new Swiper('.gallery-top', {
       autoplayStopOnLast: true,
       nextButton: '.swiper-button-next',
       prevButton: '.swiper-button-prev',
       effect: 'fade',
       fade: {
         crossFade: true,
       },
       onTransitionEnd: function (swiper) {
         console.info("页面跳转到第:", swiper.activeIndex, " 页")
       }
     })

     

共有 人打赏支持
粉丝 0
博文 2
码字总数 5291
×
木槿清
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: