Vue swiper组件制作轮播图

237 阅读1分钟

第一步:

安装依赖

npm install swiper vue-awesome-swiper --save

第二步:

全局安装

在main.js里面操作:

import VueAwesomeSwiper from 'vue-awesome-swiper'

/* 在node_modules里面找到swiper文件夹里面的css文件 */

import 'swiper/css/swiper.css'

/* 使用Vue.use来注册一个轮播图插件 */

Vue.use(VueAwesomeSwiper)

第三步:

在自己的组件文件夹中 新建一个轮播图组件 MySwiper.vue:

并复制以下代码到你的组件中:

template

<swiper ref="mySwiper" :options="swiperOptions">

<swiper-slide>Slide 1</swiper-slide>

<swiper-slide>Slide 2</swiper-slide>

<swiper-slide>Slide 3</swiper-slide>

<swiper-slide>Slide 4</swiper-slide>

<swiper-slide>Slide 5</swiper-slide>

<div class="swiper-pagination" slot="pagination"></div>

template

 

再加上样式:

<style scoped>

.swiper-container{

width:500px;

height: 400px;

border:1px solid #ccc;

}

把组件引用到app.vue文件中去