介绍

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

Github

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

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

安装

1、cdn

<code><link>



import VueAwesomeSwiper from 'vue-awesome-swiper'

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

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

4、组件使用

<code>// require styles
import 'swiper/dist/css/swiper.css'

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

export default {
  components: {
    swiper,
    swiperSlide
  }
}/<code>

5、ssr

<code>// 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)
}/<code>

6、插件

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

预览

• 默认方式

鼠标点击滑动左右切换

• Navigation （ 按钮切换 ）

按钮切换

• 分页器

• 分页器/动态指示点

• 进度条指示器

• 分页指示器

• 自定义指示器

• 滚动条

• 垂直切换

• 指示器之间设置间隙

• 多个轮播图

• 自定义

• Slides居中

• 居中加自适应

• 贴边

• 内容滚动可拖动

• 多个分布

• 水平垂直可嵌套

• 3D方块切换

• 3D滚动切换

• 缩略图

• 延迟加载

• 放大

• 侧滑菜单

总结

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

閱讀更多 最美分享Coder 的文章

關鍵字: 浏览器 jQuery 优雅