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 MacOS
    请问如何使用 谢谢
  2. 111
    111
    Google Chrome Windows 10
    学习
  3. Leonsun
    Leonsun
    Google Chrome Windows 10
    请问如何使用 谢谢
  4. 刚下飞机的贫僧
    刚下飞机的贫僧
    Google Chrome MacOS
    请问如何使用 谢谢
  5. figo
    figo
    Google Chrome MacOS
    请问如何使用 谢谢
  6. oldking
    oldking
    Google Chrome Windows 10
    动画怎么用
  7. 萨达
    萨达
    Google Chrome Windows 10
    萨达萨达
  8. sama
    sama
    Google Chrome Windows 10
    swipe 数据更新 dom不更新咋办
  9. 丧彪
    丧彪
    Google Chrome Windows 10
    学习一下
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @丧彪注意看,这个男人叫丧彪
  10. 是啥
    是啥
    Google Chrome MacOS
    学习

目录