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
    学习
    回复
  1. 1
  2. 2
  3. 3
  4. 4

相关推荐

vue3 hooks redirect重定向处理

木灵鱼儿 2100 0 1
vue 重定向 hooks

vite中typescript+eslint+prettier一份官方预设配置

木灵鱼儿 1986 49 0
vue eslint TypeScript

vue3中正确设置ref获取的组件ts类型

木灵鱼儿 5928 43 12
vue ref 组件类型

quill 富文本编辑器实现自定义工具栏按钮并实现置入html代码

木灵鱼儿 2046 19 0
vue quill 富文本编辑器

quill 富文本编辑器自定义视频上传（修改默认按钮行为）

木灵鱼儿 1968 8 0
vue quill 富文本编辑器

quill 富文本编辑器自定义图片上传（修改默认按钮行为）

木灵鱼儿 5037 33 12
vue quill 图片上传

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

木灵鱼儿 1827 0 0
vue 自定义指令 空白区域关闭

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

木灵鱼儿 5861 80 1
vue vuex vue-router

正确使用vue3的ts类型声明

木灵鱼儿 16823 177 1
vue vue3 TypeScript

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

木灵鱼儿 3547 0 0
css vue webpack
获得点赞 0
文章被阅读 20,922
最后更新 21-01-09 1:38:51

目录

目录