vue项目中使用swiper实现中间大，两边小的轮播图

最新推荐文章于 2025-10-10 16:56:57 发布

原创最新推荐文章于 2025-10-10 16:56:57 发布 · 置顶 · 6.7k 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JS中文网-www.javascriptc.com

本文详细介绍了如何在Vue项目中实现轮播图功能，包括引入Swiper库、编写DOM结构、初始化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

第四步：在vue文件中引入，并初始化swiper；

JS中文网 - 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容

先引入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的全局计算方法