一. 下载swiper:
npm install swiper -S
二. css:
在main.js里引入css
-
import Vue
from
'vue'
-
import
'swiper/dist/css/swiper.css';
三. js:
在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里(可以把官网例子的启动 var mySwiper = 删掉);
-
<script>
-
import Swiper
from
'swiper';
-
export
default {
-
name:
'HelloWorld',
-
data () {
-
return {
-
msg:
'Welcome to Your Vue.js App'
-
}
-
},
-
mounted(){
-
new Swiper (
'.swiper-container', {
-
loop:
true,
-
// 如果需要分页器
-
pagination:
'.swiper-pagination',
-
// 如果需要前进后退按钮
-
nextButton:
'.swiper-button-next',
-
prevButton:
'.swiper-button-prev',
-
// 如果需要滚动条
-
scrollbar:
'.swiper-scrollbar',
-
})
-
}
-
}
-
<
/script>
四. html:
-
<div class="swiper-container">
-
<div class="swiper-wrapper">
-
<div class="swiper-slide">Slide 1
</div>
-
<div class="swiper-slide">Slide 2
</div>
-
<div class="swiper-slide">Slide 3
</div>
-
</div>
-
<!-- 如果需要分页器 -->
-
<div class="swiper-pagination">
</div>
-
-
<!-- 如果需要导航按钮 -->
-
<div class="swiper-button-prev">
</div>
-
<div class="swiper-button-next">
</div>
-
-
<!-- 如果需要滚动条 -->
-
<div class="swiper-scrollbar">
</div>
-
</div>