Vue中swiper的使用

参考大佬文章：

vue中swiper vue-awesome-swiper的使用方法和爬坑大法_zyf_baby的博客-CSDN博客_vueawesomeswiper

修改箭头颜色：

	.swiper-button-next {
		/* 改变颜色部分：007aff → FDBD1F */
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23FDBD1F'%2F%3E%3C%2Fsvg%3E");
	}

修改分页器样式：

参考：解决使用vue-awesome-swiper组件分页器pagination样式设置失效问题 - Alice_Daily - 博客园

#parent  /deep/ .swiper-pagination-bullet{
        // 修改分页器
        background: #fdbd1f !important;
        width: 25px;
        border-radius: 20px;
        height: 5px;
}

总代码：swiper-item.vue 文件 

<template>
	<div class="ay-swiper">
		<swiper :options="swiperOption" ref="mySwiper">
			<swiper-slide>I'm Slide 1</swiper-slide>
			<swiper-slide>I'm Slide 2</swiper-slide>
			<swiper-slide>I'm Slide 3</swiper-slide>
			<swiper-slide>I'm Slide 3</swiper-slide>

			<div class="swiper-pagination" slot="pagination"></div>
			<div class="swiper-button-prev" slot="button-prev"></div>
			<div class="swiper-button-next" slot="button-next"></div>
		</swiper>
	</div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"

export default {
	components: {
		swiper,
		swiperSlide,
	},
	data() {
		return {
			swiperOption: {
				loop: true,
				autoplay: {
					delay: 3000,
					stopOnLastSlide: false,
					disableOnInteraction: false,
				},
				// 显示分页
				pagination: {
					el: ".swiper-pagination",
					clickable: true, //允许分页点击跳转
				},
				// 设置点击箭头
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev",
				},
			},
		}
	},
	computed: {
		swiper() {
			return this.$refs.mySwiper.swiper
		},
	},
	mounted() {
		// current swiper instance
		// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
		console.log("this is current swiper instance object", this.swiper)
		// this.swiper.slideTo(3, 1000, false);
	}
}
</script>
<style lang="scss" scoped >
.ay-swiper {
	.swiper-container {
		position: relative;
		width: 100%;
		height: 300px;

		.swiper-slide {
			width: 100%;
			line-height: 300px;
			color: #000;
			font-size: 16px;
			text-align: center;
		}
	}
	.swiper-button-prev {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23FDBD1F'%2F%3E%3C%2Fsvg%3E");
	}

	.swiper-button-next {
		/* 改变颜色部分：007aff → FDBD1F */
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23FDBD1F'%2F%3E%3C%2Fsvg%3E");
	}

    /deep/ .swiper-pagination-bullet{
        // 修改分页器
        background: #fdbd1f !important;
        width: 25px;
        border-radius: 20px;
        height: 5px;
    }

}

</style>

感谢各位大佬！