vue.js有轮播图插件吗？

vue.js有轮播图插件吗？

• 来源:网络
• 更新日期:2020-11-20

摘要：vue.js有轮播图插件，例如vue-concise-slider，它是基于Swiper4、适用于Vue的轮播组件，支持服务端渲染和单页应用；vue-awesome-swiper配置简单，支持自适应/全屏+按钮+分页，同时兼容

vue.js有轮播图插件，例如vue-concise-slider，它是基于Swiper4、适用于Vue的轮播组件，支持服务端渲染和单页应用；vue-awesome-swiper配置简单，支持自适应/全屏+按钮+分页，同时兼容移动和PC端。

vue.js轮播图插件vue-awesome-swiper

vue-awesome-swiper是基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。

vue-awesome-swiper是基于swiper的，安装不同版本的vue-awesome-swiper对应不同的swiper，所以swiper里面的属性多数能应用到vue-awesome-swiper中，也可以根据swiper文档来设置vue-awesome-swiper属性；

swiper官方文档：https://www.swiper.com.cn/api/index2.html

安装：

npm install vue-awesome-swiper --save

导入使用：

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

// mount with global 
Vue.use(VueAwesomeSwiper)

// mount with component
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}

案例展示及示例代码：

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

注意版本变化

starting with version 2.6.0, you need to manually introduce swiper's css

import 'swiper/dist/css/swiper.css'

更多编程相关知识，请访问：编程课程！！