介紹

在Web網頁開發中，我們經常需要用到圖片輪播，在以往傳統的開發方式中有很多基於jquery的插件可供使用，但是隨著目前各類前端框架層出不窮的現狀，在某些方面特別是針對特定的場景，還是有不少地方不太完善，今天就像大家介紹一個優雅的圖片輪播插件——Vue-Awesome-Swiper，基於 Swiper4、適用於 Vue 的輪播組件，支持服務端渲染和單頁應用，且可用於移動端和PC端。

Github

目前在Github上已經收穫了8.8k的stars，可見其還是非常受歡迎的，可能也有不少小夥伴用過它！

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

安裝

1、cdn

2、npm

npm install vue-awesome-swiper --save

3、全局使用

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)

4、組件使用

// require stylesimport '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 environmentif (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！