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

相关推荐

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

木灵鱼儿 460 0 0
vue eslint TypeScript

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

木灵鱼儿 423 1 0
vue ref 组件类型

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

木灵鱼儿 596 3 0
vue quill 富文本编辑器

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

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

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

木灵鱼儿 526 9 0
vue quill 图片上传

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

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

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

木灵鱼儿 3361 15 0
vue vuex vue-router

正确使用vue3的ts类型声明

木灵鱼儿 11676 46 1
vue vue3 TypeScript

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

木灵鱼儿 2046 0 0
css vue webpack

vuex 动态注册和卸载模块

木灵鱼儿 1756 0 0
vue vuex 动态注册vuex
获得点赞 0
文章被阅读 11,781
最后更新 21-01-09 1:38:51

目录

目录