背景（重點(diǎn)癌佩，一定要看！！＠狗佟！）
swiper各個版本和vue版本的映射
http://www.reibang.com/p/7ba3e3d501a4
一杠输、先看效果
image.png
二赎败、指定版本安裝swiper
注意swiper在6x之上的版本和6x之下的版本使用有很大差異
npm install swiper@6.8.4 --save
三、引入樣式
//樣式 6.x版本之上的引入方式
import "swiper/swiper-bundle.css";
import { Swiper, Navigation, Pagination, Autoplay } from "swiper";
四蠢甲、引入組件
這一步是關(guān)鍵僵刮，一定要注意！ｐ信！搞糕！
4.1、引入
import { Swiper, Navigation, Pagination, Autoplay } from 'swiper'
4.2曼追、使用
Swiper.use([Navigation, Pagination, Autoplay])
4.3窍仰、解釋：
4.3.1、Navation
前進(jìn)礼殊、后退按鈕點(diǎn)擊有沒有效果驹吮；如果沒有他，只有樣式晶伦，點(diǎn)擊不起作用
4.3.2碟狞、Pagination
分頁器出不出現(xiàn)，點(diǎn)擊有沒有效果婚陪；很大的情況下分頁器不出現(xiàn)族沃，可能就是這個的影響。
一定要加上clickable: true近忙，這樣點(diǎn)擊分頁器竭业，才有效！（下方有完整代碼）
4.3.3及舍、Autoplay
能不能自動播放就靠他未辆！
4.4、輪播圖點(diǎn)擊事件觸發(fā)
// swiper點(diǎn)擊事件
on: {
click: function (e) {
console.log(e);
window.open("http://www.haikangborui.com", "_blank");
},
},
五锯玛、完整代碼
<template>
<!-- 輪播圖 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in imgList" :key="index">
<img :src="item.url" alt="" width="821" />
</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導(dǎo)航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
import { Swiper, Navigation, Pagination, Autoplay } from "swiper";
export default {
name: "Swiper",
data() {
return {
imgList: [
{
url: require("/public/img/bg/welcome/swiper1.png"),
},
{
url: require("/public/img/bg/welcome/swiper2.png"),
},
{
url: require("/public/img/bg/welcome/swiper3.png"),
},
],
};
},
mounted() {
Swiper.use([Navigation, Pagination, Autoplay]);
new Swiper(".swiper-container", {
slidesPerView: 2, //設(shè)置slider容器能夠同時顯示的slides數(shù)量
spaceBetween: 80, //slide之間的距離（單位px）
centeredSlides: true, //設(shè)定為true時咐柜，active slide會居中兼蜈，而不是默認(rèn)狀態(tài)下的居左。
observer: true, //修改swiper自己或子元素時拙友，自動初始化swiper
observeParents: true, //修改swiper的父元素時为狸，自動初始化swiper
loop: true,
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
autoplay: {
delay: 3000, //3秒切換一次
},
// 如果需要分頁器
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// swiper點(diǎn)擊事件
on: {
click: function (e) {
console.log(e);
window.open("http://www.haikangborui.com", "_blank");
},
},
});
},
};
</script>
<style lang="scss">
.swiper-container {
position: relative;
width: 100%;
height: 360px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1.1);
transition: 0.5s;
z-index: 2001;
}
</style>
