swiper使用先 npm i swiper 在node_modules下面会生成一个swiper文件（本来是没有的）
然后 需要引入import Swiper from 'swiper'组件
接着import '../../node_modules/swiper/dist/css/swiper.min.css'样式文件这个文件下载到哪里就从哪里引入不一定是这个文件夹
这样就可以使用了全部代码就是这个里面图片换换需要什么功能官方API去查 over 。
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/img/pic1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../assets/img/pic2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../assets/img/pic3.jpg" alt="">
</div>
</div>
<div class="swiper-pagination swiprRem"></div>
<div class="swiper-button-next swiprRem"></div>
<div class="swiper-button-prev swiprRem"></div>
</div>
</template>
<script>
import Swiper from 'swiper'
import '../../node_modules/swiper/dist/css/swiper.min.css'
export default {
name:'swiper',
data(){
return{
}
},
mounted(){
var mySwiper = new Swiper('.swiper-container', {
autoplay:true,
loop:true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
})
},
}
</script>
<style scoped>
.swiper-container{
width: 1200px;
margin:10px auto;
/* margin-left:380px; */
}
.swiper-slide{
height: 500px;
background:#f00;
}
img{
width: 1200px;
}
</style>
