輪播圖左右的切換按鈕、如果點選沒有反應,控制台也沒有報錯。很大可能是==版本問題==。如果不指定版本資訊、預設安裝的是最新的版本。版本過高或者過低都有可能導緻無效。目前相容性和穩定性比較好的是: 5.4.5
。
官網位址:https://www.swiper.com.cn/
1、安裝Swiper
npm i [email protected]
2、在要使用的頁面引入swiper
注:也可以在全局引入、這樣在其它頁面都可以使用到了。我這裡就一個頁面使用、就單獨在某一個頁面引入了。
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
3、輪播圖的位置
3.1 設定一個div放置到頁面對應位置
分頁器、切換按鈕的顔色大小、以及切換效果都可以進行設定。
swiper學習網址
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, i) in images" :key="i">
<img class="carousel-img" :src="item.img" alt="" />
</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
3.2 設定輪播圖的大小和圖檔完全填充
.swiper-container {
height: 350px;
width: 95%;
}
.carousel-img {
width: 100%;
height: 100%;
}
3.3 輪播圖檔
這裡使用雙向資料綁定、這裡的輪播圖檔後期可以進行替換。比如從後端接口傳回的輪播圖檔替換數組中的。這裡暫時寫死
images: [
{ img: "https://www.baidu.com/img/baidu_jgylogo3.gif" },
{ img: "http://localhost:8282/images/21667218837206.jpg" },
{ img: "http://localhost:8282/images/21667218837206.jpg" },
],
3.4 初始化一個輪播圖
mounted() {
var mySwiper = new Swiper(".swiper-container", {
autoplay: {
delay: 5000,
disableOnInteraction: false,
}, //可選選項,自動滑動
loop: true, // 循環模式選項
speed: 4000,
// 如果需要分頁器
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// 如果需要前進後退按鈕
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
disabledClass: "my-button-disabled",
},
});
},
4、自己遇到的問題
4.1 版本不正确
開始使用的3.4.2 版本的、使用這個版本導緻輪播圖的左右切換按鈕不好使
4.2 如何在項目中解除安裝已經安裝的包?
npm uninstall swiper
5、如何将Swiper抽離成一個元件?
這裡不難看出、全部寫在一個頁面、會導緻頁面很臃腫。不如直接将swiper抽離成一個公共元件。哪個頁面想使用,直接引入元件
5.1 抽離出公共元件
MySwiper.vue
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, i) in images" :key="i">
<img class="carousel-img" :src="item.img" alt="" />
</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
name: "MySwiper",
data() {
return {
images: [
{ img: "https://www.baidu.com/img/baidu_jgylogo3.gif" },
{ img: "http://localhost:8282/images/21667218837206.jpg" },
{ img: "http://localhost:8282/images/21667218837206.jpg" },
],
};
},
mounted() {
var mySwiper = new Swiper(".swiper-container", {
autoplay: {
delay: 5000,
disableOnInteraction: false,
}, //可選選項,自動滑動
loop: true, // 循環模式選項
speed: 4000,
// 如果需要分頁器
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// 如果需要前進後退按鈕
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
disabledClass: "my-button-disabled",
},
});
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.carousel-img {
width: 100%;
height: 100%;
}
.swiper-container {
height: 350px;
width: 95%;
}
</style>
5.2 在對應頁面引入
import MySwiper from "@/components/MySwiper";
components: {
MySwiper
},
5.3 将元件放到對應位置
<!-- 輪播圖元件 -->
<MySwiper></MySwiper>