在vue中引入swiper

1,安裝swiper   （ swiper3版本 ）
npm安裝： 在需要使用的項目下打開cmd窗口輸入： npm i swiper@3.4.2 -S

(安裝過淘寶鏡像的可以輸入  ：  cnpm i swiper@3.4.2 -S)

此時進入package.json文件查看是否下載完成

 

2,安裝完成后，進入項目進行配置使用，

首先進入    src   文件夾下的   main.js    文件 寫入以下兩句

import Swiper from "swiper"

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

 

到此，引入swiper，配置swiper完成。

然后。在所需頁面

 ⑴   template 標簽內寫入以下語句，

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../assets/logo.png" /></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide"><img src="../assets/logo.png" /></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>

⑵ script 標簽的 mounted 中寫入以下語句，

mounted() {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination', //分頁器
nextButton: '.swiper-button-next', //前進按鈕
prevButton: '.swiper-button-prev', //后退按鈕
loop: true, //循環
paginationClickable:true, //分頁器點擊
spaceBetween: 30, // swiper-slide 間的距離為30
autoplay: 1000, //時長
autoplayDisableOnInteraction: false, //點擊不會取消自動
});
}

⑶ style 標簽內 寫入以下語句，

.swiper-container {
width: 800px;
height: 400px;
}

 

一個簡單的swiper插件圖就完成了，想要更多的插件圖就可以在 swiper 官網尋找自己所需的代碼啦。