swiper + vue 中间大两边小轮播图

展示效果

代码

字体16px 框架vuetify

<template>
	<v-main>
		<div class="body_height ofs">
			<div style="overflow: hidden;">
				<div style="margin: 0 0.7rem 2rem;">
					<!-- 轮播 -->
					<div style="">
						<swiper :options="swiperOption" ref="mySwiper" @swiper="onSwiper"
							@slideChange="onSlideChange(swiper)" v-if="pics.length">
							<swiper-slide v-for="(slide, i) in pics">

								<img :src="slide" height="10rem" style="height: 10rem;">
							</swiper-slide>

						</swiper>

					</div>
				</div>
			</div>
		</div>
	</v-main>
</template>

<script>
	// 引入插件
	import {
		swiper,
		swiperSlide
	} from "vue-awesome-swiper";
	import "swiper/css/swiper.css";
	export default {
		components: {
			swiper,
			swiperSlide,
		},
		data() {
			return {
				swiperOption: {
					loop: true,
					autoplay: true,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true, //修改swiper的父元素时，自动初始化swiper 
					slidesPerView: "auto",
					centeredSlides: true,
					// 显示分页
					pagination: {
						el: ".swiper-pagination",
						clickable: true //允许分页点击跳转
					},
					// 设置点击箭头
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev"
					},
				
					on: {
				
						init: function(swiper) {
							//Swiper初始化了
							// alert('当前的slide序号是'+this.activeIndex);//或者swiper.activeIndex，swiper与this都可指代当前swiper实例
							/* this.emit('transitionEnd');//在初始化时触发一次transitionEnd事件，需要先设置transitionEnd */
							console.log("初始化", this.ind)
				
						},
				
					},
				},
				pics: [
					require("../../images/banner1.png"),
					require("../../images/banner2.png"),
					require("../../images/banner3.png"),
					require("../../images/banner4.png")
				],


			}
		},
		created() {

		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.swiper;
			},


		},
		methods: {
			goBack() {
				this.$router.go(-1)
			},
			onSwiper(swiper) {
				console.log("swiper");
			},
			onSlideChange(e) {
				console.log("执行暂停播放", e.activeIndex, e.previousIndex)


			},
		}
	}
</script>

<style scoped>
	.swiper-container {
		width: 100%;
		height: 10rem;
		overflow: visible !important;
	}

	.swiper-container .swiper-wrapper .swiper-slide {
		width: 100%;
		border-radius: 0.5rem;
	}

	.swiper-container .swiper-wrapper .swiper-slide img {
		width: 100%;
		height: 10rem;
		border-radius: 0.5rem;
	}

	.swiper-container .swiper-wrapper .swiper-slide-prev {
		margin-top: 0.5rem;
		height: 9rem !important;

	}

	.swiper-container .swiper-wrapper .swiper-slide-prev img {
		height: 9rem !important;
	}

	.swiper-container .swiper-wrapper .swiper-slide-next {
		margin-top: 0.5rem;
		height: 9rem !important;
	}

	.swiper-container .swiper-wrapper .swiper-slide-next img {
		height: 9rem !important;
	}

	.swiper-container .swiper-wrapper .swiper-slide-active {
		width: 100%;
	}

	.swiper-pagination {
		bottom: -30px !important;

	}

	.swiper-pagination .swiper-pagination-bullet {
		width: 12px;
		height: 12px;
		background: #ff1e1e;
	}

	.swiper-pagination .swiper-pagination-bullet-active {
		width: 21px;
		height: 12px;
		background: #e75230;
		border-radius: 6px;
	}
</style>