介绍

在Web网页开发中，我们经常需要用到图片轮播，在以往传统的开发方式中有很多基于jquery的插件可供使用，但是随着目前各类前端框架层出不穷的现状，在某些方面特别是针对特定的场景，还是有不少地方不太完善，今天就像大家介绍一个优雅的图片轮播插件——Vue-Awesome-Swiper，基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用，且可用于移动端和PC端。

Github

目前在Github上已经收获了8.8k的stars，可见其还是非常受欢迎的，可能也有不少小伙伴用过它！

https://github.com/surmon-china/vue-awesome-swiper

安装

1、cdn

<link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">
  Vue.use(window.VueAwesomeSwiper)
</script>

2、npm

npm install vue-awesome-swiper --save

3、全局使用

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

4、组件使用

// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

5、ssr

// If used in nuxt.js/ssr, you should keep it only in browser build environment
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}

6、插件

import Swiper from 'swiper'
Swiper.use({
  name: 'pluginName',
  params: {
    pluginSwitch: false,
  },
  on: {
    init() {
      if (!this.params.pluginSwitch) return
      console.log('init')
    },
    // swiper callback...
  }
})

预览

• 默认方式

鼠标点击滑动左右切换

• Navigation （ 按钮切换 ）

按钮切换

• 分页器

• 分页器/动态指示点

• 进度条指示器

• 分页指示器

• 自定义指示器

• 滚动条

• 垂直切换

• 指示器之间设置间隙

• 多个轮播图

• 自定义

• Slides居中

• 居中加自适应

• 贴边

• 内容滚动可拖动

• 多个分布

• 水平垂直可嵌套

• 3D方块切换

• 3D滚动切换

• 缩略图

• 延迟加载

• 放大

• 侧滑菜单

总结

以上展示的效果是可静态图展示，实际上动图展示效果更加，因此建议直接查看官方Demo，中文文档，Vue-Awesome-Swiper的动态效果很多，我相信一定有一款适合你的项目，enjoy it！