vue项目,如果要使用轮播,能做动画的只有vue-awesome-swiper了,除非牛人自己造轮子,但是vue-awesome-swiper是需要swiper的支持,而现在swiper已经出到6了,swiper的官网明确表示6只能支持vue3.0,而且官网没有旧版本的api文档,这就表示,目前主流的2.0项目,想用它真的就只能瞎子过河,摸不着边了。

而且swiper的动画,是需要魔改代码的,因为动画的那个js文件需要改动,然后动画使用的animate.css也因为版本大改,导致使用起来越发的摸不着头脑,百度到的都是旧的教程,为此我特意研究了下,终于是“完美”使用了,为此出个教程。

废话不多说,先上图演示:

教程

此处内容已隐藏回复后方可阅读。

分类: vue 项目实战 标签: vue轮播Animate.cssswipervue-awesome-swiper轮播动画swiperAnimatedswiper.animate

评论

全部评论 39

  1. 啊
    Google Chrome Windows 10
    谢谢
  2. 啦啦啦
    啦啦啦
    Google Chrome Windows 7
    vue2.6 swiper5.2能用这个案例吗?
  3. KK
    KK
    Google Chrome MacOS
    回复
  4. 66
    66
    Google Chrome Windows 10
    感谢分享
  5. nidaye
    nidaye
    Google Chrome Windows 10
    牛蛙牛蛙
  6. jason
    jason
    Google Chrome Windows 10
    使用动画 只有第一页有用
  7. 国画
    国画
    Google Chrome Windows 10
    感谢分享
  8. 123
    123
    Google Chrome MacOS
    回复
  9. 11
    11
    Google Chrome Windows 10
    学习
  10. test
    test
    Google Chrome Windows 10
    学习

目录