vue2使用swiper制作轮播图 修改轮播图样式

修改swiper轮播图基础样式：前进后退按钮或分页器样式

安装与使用swiper

vue2项目只能使用swiper版本6及6以下，最稳定的版本5.4.5

npm install swiper@5.4.5 --save
npm install vue-awesome-swiper@3.1.3 --save

1. 在文件中引入

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
	name: "",
	components: {
		swiper,
		swiperSlide
	},
}

2. 在文件中使用

<div class="swiper-page">//设置轮播图外层基本样式：大小，背景颜色等
	<div class="container-list">//设置相对定位，用于定位左右箭头
		<swiper :options="swiperOptions">
			<swiper-slide v-for="(item, index) in slideList" :key="index">
				<div class="container">
					<div>{{ item.detail }}</div>
				</div>
			</swiper-slide>
		</swiper>
		//分页、左右箭头，样式名字需与配置项、css中类名相同
		<div class="swiper-pagination1" slot="pagination"></div>
		<div class="swiper-button-next1" slot="button-next"></div>
		<div class="swiper-button-prev1" slot="button-prev"></div>
	</div>
</div>

分页、左右箭头放到外面表示可以放置在轮播图外面，但需要在最外层添加一层div，设置相对定位position: relative

3. swiperOptions配置项，配置在data中

swiperOptions: {
	loop: true,//无限循环
	autoplay: {
		//自动切换
		delay: 1000,
		stopOnLastSlide: false, //切换到最后一个slide时停止自动切换
		disableOnInteraction: false, //用户操作swiper之后，是否禁止自动切换。默认为true
	},
	// 显示分页
	pagination: {
		el: ".swiper-pagination1",//若改变分页样式，需改变样式名字，默认为.swiper-pagination
		type: "bullets",
		clickable: true, //允许分页点击跳转
	},
	// 设置点击箭头
	navigation: {
		nextEl: ".swiper-button-next1",//若改变右箭头样式，需改变名字，默认为.swiper-button-next
		prevEl: ".swiper-button-prev1",//若改变左箭头样式，需改变名字，默认为.swiper-button-prev
	},
},
//数据列表
slideList: [
	{
		detail: "第一页",
	},
	{
		detail: "第二页",
	},
	{
		detail: "第三页",
	},
],

4. 设置轮播图样式

.swiper-page {
	//设置轮播图外层基本样式：大小，背景颜色等
	width: 40%;
	padding:40px;
	box-sizing: border-box;
	background: #0b1c4e;
	
	.container-list{
		//设置相对定位，用于定位左右箭头
		position: relative;
	}
	//设置轮播图整体样式
	.swiper-container {
		width: 100%;
		height: 130px;
		background: rgba(21, 102, 131,0.5);
		border-radius: 5px;
	}
	//设置右箭头样式
	.swiper-button-next1{
		width:30px;
		height:30px;
		background: url('../assets/images/next.png') no-repeat;
		background-size: 100% 100%;
		position:absolute;
		top:calc(50% - 25px);
		right:-33px;
		cursor: pointer;
	}
	//设置左箭头样式
	.swiper-button-prev1{
		width:30px;
		height:30px;
		background: url('../assets/images/prev.png') no-repeat;
		background-size: 100% 100%;
		position:absolute;
		top:calc(50% - 25px);
		left:-33px;
		cursor: pointer;
	}
	//设置分页样式
	.swiper-pagination1{
		text-align: center;//居中显示
		margin:0;
		::v-deep .swiper-pagination-bullet{
			//深度修改swiper分页按钮样式
			width:24px;
			height: 4px;
			background: url('../assets/images/active.png') no-repeat;
			background-size: 100% 100%;
			border-radius: 0;
			margin:0 1px;
		}
	}
	.container {
		.detail{
			color: #FFF;
		}
	}
}

分页样式只需设置当前处于点击状态时样式，swiper会默认给处于非当前状态时的分页器样式不透明度 opacity:0.2

5. 最终效果