最近在写官网，用vue写的。需要实现横向和纵向的轮播图效果

横向轮播图：

纵向轮播图：

下面介绍使用方法：

解决步骤1：安装"swiper": "^4.5.1"

npm install swiper@4.5.1

解决步骤2：页面局部注册swiper

/* 引入swiper插件 */
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";
import "swiper/dist/js/swiper";

解决步骤3：在data中定义两个变量——用于销毁

data(){
	return{
		swiper1: null,
		swiper2: null,
	}
}

解决步骤4：在mounted中使用

mounted(){
	if (this.swiper1) {
		this.swiper1.destroy(true, true); // 销毁 Swiper 实例，确保完全销毁并清理资源
	}
	if (this.swiper2) {
		this.swiper2.destroy(true, true); // 销毁 Swiper 实例，确保完全销毁并清理资源
	}
	//横向轮播图
	this.swiper2 = new Swiper(".swiper2", {
		loop: true, // 无缝
		autoplay: {
			//自动开始
			delay: 3000, //时间间隔
			disableOnInteraction: false //*手动操作轮播图后不会暂停*
		},
		paginationClickable: true,
		slidesPerView: 5, // 一组三个
		spaceBetween: 10, // 间隔
		// 如果需要前进后退按钮
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev"
		},
		// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
		observer: true,
		observeParents: true
	});
	//纵向轮播图
	this.swiper1 = new Swiper(".swiper0", {
		loop: true, // 无缝
		autoplay: {
			//自动开始
			delay: 1000, //时间间隔
			disableOnInteraction: false //*手动操作轮播图后不会暂停*
		},
		direction: "vertical",
		paginationClickable: false,
		slidesPerView: 4, // 一组三个
		spaceBetween: 2, // 间隔
		// 如果需要前进后退按钮
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev"
		},
		// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
		observer: true,
		observeParents: true
	});
},

统一的样式：

.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	align-items: center;
	transition-property: transform;
	transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
	box-sizing: content-box;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}

对应的页面内容如下：

先看下横向轮播图的html代码：

<div class="swiper-container swiper2">
	<div class="swiper-wrapper">
		<div class="swiper-slide" style="height: 350px; display: flex; flex-direction: column" v-for="(item, index) in certList" :key="index">
			<img class="tixi_img" :src="item.img" alt="" />
			<div style="font-size: 12px; margin-top: 6px">{{ item.title }}</div>
		</div>
	</div>
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
</div>

纵向轮播图除了设置direction方向外，还需要更改左右箭头的位置，将左右箭头改为上下箭头。

<div class="swiper-container swiper0">
	<div class="swiper-wrapper">
		<div class="swiper-slide" style="height: 140px" v-for="(item, index) in proList" :key="index"><img class="gongchang_img" :src="item" alt="" /></div>
	</div>
	<div class="swiper-button-next" style="top: calc(100% - 50px); transform: rotate(90deg); right: calc(50% - 10px)"></div>
	<div class="swiper-button-prev" style="top: 20px; transform: rotate(90deg); left: calc(50% - 20px)"></div>
</div>

对应的css代码：

.swiper0 {
	width: 190px;
	height: 480px;

	.gongchang_img {
		height: 120px !important;
		width: 190px;
		overflow: hidden;
		object-fit: cover;
	}
}

解决步骤5：销毁swiper

beforeDestroy() {
	if (this.swiper1) {
		this.swiper1.destroy(true, true); // 销毁 Swiper 实例，确保完全销毁并清理资源
	}
	if (this.swiper2) {
		this.swiper2.destroy(true, true); // 销毁 Swiper 实例，确保完全销毁并清理资源
	}
},

完成，多多积累，多多收获！！！