溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
項目中使用的vue，剛好有需求要實現輪播圖，突出顯示當前圖片，兩邊展示其他圖片；通過查各種資料，實現了，故在此記錄下來
下面我們來看下實現步驟：
<div class="swiper-container">
<div class="swiper-wrapper">
<div
v-for="(item, i) in pictures"
:key="i"
class="swiper-slide"
>
<!-- 具體內容 -->
<img
:src="item.advertiseImages"
alt="商品圖片"
>
</div>
</div>
</div>
第三步：在項目中使用npm安裝swiper模塊
npm install swiper --save-dev
JS中文網 - 前端進階資源教程www.javascriptC.com 一個致力于幫助開發者用代碼改變世界為使命的平臺，每天都可以在這里找到技術世界的頭條內容
第四步：在vue文件中引入，并初始化swiper； 先引入swiper
import Swiper from "swiper";
注意初始化需要放入mounted鉤子中哦
import Swiper from "swiper";
export default {
data() {
return {
}
},
mounted() {
var mySwiper = new Swiper(".swiper-container", {
direction: "horizontal",
loop: false,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 20,
observer: true,
observeParents: true
});
}
}
如果你的項目中，圖片是從后臺接口獲取，那么上面的初始化可能會出問題，這個時候我們采取另外的方式初始化swiper
import Swiper from "swiper";
export default {
data() {
return {
mySwiper: null
}
},
methods: {
getdata() {
promise.then(res => {
this.pictures = res.images || [];
this.$nextTick(() => {
this.initSwiper();
});
});
},
initSwiper() {
this.mySwiper = new Swiper(".swiper-container", {
direction: "horizontal",
loop: false,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 20,
observer: true,
observeParents: true
});
}
}
}
把swiper的初始化放入vue的nextTick中執行，就解決掉問題啦
第五步：如果想獲取當前滾動到哪一張圖片怎么辦呢
this.mySwiper.activeIndex;
使用activeIndex屬性就可以獲取到當前圖片的索引啦。 那么我們這個功能就完成啦
總結
以上所述是小編給大家介紹的vue使用swiper實現中間大兩邊小的輪播圖效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
