需要准备的东西:
1.swiper的css和js文件(swiper官网自行下载)
2.cmd中先在文件夹目录下npm install --save swiper
一、把准备好的swiper文件放在的static下。如图:
二、在src文件夹下components文件下建立swiper.vue(名字可以随便起)
在我们刚刚建立的swiper.vue文件中写入信息
template中对应 swiper官网中html,如图(Slide1,Slide2,Slide3换成图片)
在script中先把我们准备好的swiper的css和js文件引入进来
然后将他导出,从var mySwiper开始为swiper官网中内容
<script>
import '../../../static/swiper/swiper-3.4.2.min.css'
import Swiper from '../../../static/swiper/swiper-3.4.2.min.js';
export default{
name:"aaa",
comments:{Swiper},
mounted(){
this.$nextTick(() =>{
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical',
loop: true,
autoplay:1000,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
// 以下看个人需要加或者不加
autoplayDisableOnInteraction : false, //触碰,拖动,点击后继续轮播
paginationClickable :true, //关联点
})
// 以下看个人需要加或者不加,效果为鼠标经过轮播停止,划出继续
$('.swiper-container').mouseover(function(){
mySwiper.stopAutoplay();
})
$('.swiper-container').mouseout(function(){
mySwiper.startAutoplay();
})
})
}
}
</script>
style中设置scoped(仅用于本页面)和你所需轮播图的大小
<style scoped>
.swiper-container {
width: 790px;
height: 340px;
}
</style>
在components中建立index.vue(名字随便起)用来展示轮播图
在刚在建立index.vue的文件夹中的script中引入swiper
<script>
import swiper from "./swiper"
export default{
components:{
swiper
}
}
</script>
template中
<template>
<div id="aaa">
<swiper/>
</div>
</template>
三(此部分也可以在Vue项目步骤中查看)
src文件夹下的App.vue中:
script中:
把他自带的注释掉(或者删掉)
引入刚才我们建立的index.vue文件并导出
template中引用模块
把他id为app中自带的注释掉(或者删掉)
<index/>
<template>
<div id="app">
<index/>
</div>
</template>
<script>
import index from "./components/index"
export default {
name: 'app',
components:{
index
}
}
</script>
src下main.js中把路由链接的两句话注释掉
import
router
from
'
./router
' 和 new Vue下的router,这两句话需要注释
运行项目就可以看到效果啦