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. jqk
    jqk
    Google Chrome Windows 10
    瞧瞧
    回复
  2. 生
    生
    Google Chrome Windows 10
    收到
    回复
  3. 问问
    问问
    Google Chrome Windows 10

    Warning: Trying to access array offset on value of type null in /www/wwwroot/kod.mulingyuer.com/www.mulingyuer.com/usr/themes/Typecho_Theme_JJ/functions.php on line 1066
    参考一下
    回复
  4. jqk
    jqk
    Google Chrome Windows 10
    瞅瞅
    回复
  5. yunfeiyang
    yunfeiyang
    Google Chrome Windows 10
    最后不需要引入animate.css吗？
    回复
  6. yunfeiyang
    yunfeiyang
    Google Chrome Windows 10
    看一下哈
    回复
  7. 古哥
    古哥
    FireFox Windows 10
    来看看，万一哪天用的上呢
    回复
  1. 1
  2. 2
  3. 3
  4. 4

相关推荐

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

木灵鱼儿 988 29 0
vue eslint TypeScript

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

木灵鱼儿 1635 13 10
vue ref 组件类型

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

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

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

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

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

木灵鱼儿 2158 23 12
vue quill 图片上传

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

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

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

木灵鱼儿 4313 31 1
vue vuex vue-router

正确使用vue3的ts类型声明

木灵鱼儿 13748 82 1
vue vue3 TypeScript

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

木灵鱼儿 2542 0 0
css vue webpack

vuex 动态注册和卸载模块

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

目录

目录