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
版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。

评论

表情

全部评论 33

  1. 萨达
    萨达
    Google Chrome Windows 10
    萨达萨达
    回复
  2. sama
    sama
    Google Chrome Windows 10
    swipe 数据更新 dom不更新咋办
    回复
  3. 丧彪
    丧彪
    Google Chrome Windows 10
    学习一下
    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @丧彪注意看，这个男人叫丧彪
      回复
  4. 是啥
    是啥
    Google Chrome MacOS
    学习
    回复
  5. 啊
    啊
    Google Chrome Windows 10
    谢谢
    回复
  6. 啦啦啦
    啦啦啦
    Google Chrome Windows 7
    vue2.6 swiper5.2能用这个案例吗？
    回复
  7. KK
    KK
    Google Chrome MacOS
    回复
    回复
  8. 66
    66
    Google Chrome Windows 10
    感谢分享
    回复
  9. nidaye
    nidaye
    Google Chrome Windows 10
    牛蛙牛蛙
    回复
  10. jason
    jason
    Google Chrome Windows 10
    使用动画 只有第一页有用
    回复
  1. 1
  2. 2
  3. 3
  4. 4

相关推荐

木灵鱼儿 vue 项目实战

实现一个点击空白区域关闭显示的自定义指令

514 0 0
木灵鱼儿 vue 项目实战

使用vue2.7的一些踩坑事项

2248 5 0
木灵鱼儿 vue 项目实战

正确使用vue3的ts类型声明

8494 0 1
木灵鱼儿 vue 项目实战

关于给css自动添加浏览器前缀

1407 0 0
木灵鱼儿 vue 项目实战

vuex 动态注册和卸载模块

1205 0 0
木灵鱼儿 vue 项目实战

vue-i18n 的使用方式

1592 1 2
木灵鱼儿 vue 项目实战

vue router 一个重定向页面的思路

2696 0 0
木灵鱼儿 vue 项目实战

vue 过滤器 驼峰与短横线相互转换的方法

2000 0 2
木灵鱼儿 vue 项目实战

使用vue.draggable拖拽组件遇到的一些问题

3808 44 3
木灵鱼儿 vue 项目实战

关于 element table多选里面实现单选的偷懒做法

3283 0 0
获得点赞 0
文章被阅读 8680

目录