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. ft
    ft
    Google Chrome Windows 10
    学习
    回复
  2. 大大大
    大大大
    Google Chrome Windows 10
    学习
    回复
  3. shuchang
    shuchang
    Google Chrome MacOS
    学习一下
    回复
  4. 白夜
    白夜
    Google Chrome Windows 10
    学习
    回复
  5. 1
    1
    Google Chrome Windows 10
    学习
    回复
  6. 77
    77
    Google Chrome Windows 10
    学习一下，谢谢
    回复
  7. comma
    comma
    Google Chrome Windows 10
    学习一下
    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @comma重新编辑了下样式，最近换了新主题，在测试中
      回复
  8. sa and sa
    sa and sa
    Google Chrome Windows 10
    前来学习一下
    回复
  9. fle
    fle
    Google Chrome Windows 10
    看看
    回复
  10. 吧
    吧
    Google Chrome Windows 10
    看看
    回复
  1. 1
  2. 2
  3. 3
  4. 4

相关推荐

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

木灵鱼儿 996 29 0
vue eslint TypeScript

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

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

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

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

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

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

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

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

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

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

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

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

正确使用vue3的ts类型声明

木灵鱼儿 13799 82 1
vue vue3 TypeScript

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

木灵鱼儿 2560 0 0
css vue webpack

vuex 动态注册和卸载模块

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

目录

目录