vue專案中使用swiper實現中間大，兩邊小的輪播圖

前言

專案中使用的vue，剛好有需求要實現輪播圖，突出顯示當前圖片，兩邊展示其他圖片；通過查各種資料，實現了，故在此記錄下來

下面我們來看下實現步驟：

實現效果如下：

第一步：首先在專案index.html中引入swiper的css檔案-swiper.min.css
第二部：寫入dom結構

<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中執行，就解決掉問題啦

第五步：寫好swiper樣式（這裡使用的stylus）

.swiper-container
    margin-top crem(40)
    width crem(750)
    height crem(850)
    margin-bottom crem(53)
    overflow visible!important
.swiper-container .swiper-wrapper .swiper-slide
    width crem(620)
    border-radius crem(20)
.swiper-container .swiper-wrapper .swiper-slide img
    width 100%
    height 100%
    border-radius crem(20)
.swiper-container .swiper-wrapper .swiper-slide-prev
    margin-top crem(18)
    height crem(810)!important
.swiper-container .swiper-wrapper .swiper-slide-prev img
    height crem(810)!important
.swiper-container .swiper-wrapper .swiper-slide-next
    margin-top crem(18)
    height crem(810)!important
.swiper-container .swiper-wrapper .swiper-slide-next img
    height: crem(810)!important
.swiper-container .swiper-wrapper .swiper-slide-active
    width: crem(620)
.swiper-pagination
    bottom: crem(-30)!important
// crem 為專案配置rem的全域性計算方法
複製程式碼

第六步：如果想獲取當前滾動到哪一張圖片怎麼辦呢

this.mySwiper.activeIndex;
複製程式碼

使用activeIndex屬性就可以獲取到當前圖片的索引啦。那麼我們這個功能就完成啦

❤️ 看完兩件事

如果你覺得這篇內容對你挺有啟發，我想邀請你幫我兩個小忙：

點個「贊」，把這篇內容分享到你的QQ/微信群，讓更多的人也能看到 -_-，
關注公眾號「IT平頭哥聯盟」，一起進步，一起成長！

vue專案中使用swiper實現中間大，兩邊小的輪播圖

前言

❤️ 看完兩件事

更多文章

相關文章