vue组件实现轮播图

目录

1.组件SwiperCom.vue代码

2.所要展示的页面代码

---

1.组件SwiperCom.vue代码

<template>
	<div class="swiper" @mouseover="overHd" @mouseout="auto">
		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
			<img :src="item" width="100%">
		</div>

		<div class="thumbs">
			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in 4" :key='item'
				@click="index=item-1">{
  {item}}</span>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			gallery: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				//默认显示 
				index: 0,
				stopID