一个页面使用多个swiper冲突

点击上面swiper的箭头，下面轮播会动
原因：两个轮播用的都是swiper插件，而控制轮播的左右箭头均如下class名相同，当它们放在一个页面的时候，由于类名相同无法判断是哪一个轮播，自然会冲突。

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

解决：给两个swiper的最外层父元素分别加上id以区分，例如给上方加id为“swiper-top”。

<template>
	<div id="swiper-top">
		<div class="out_container">
			<div class="in_container">
				<swiper :options="swiperOption">
					......
				</swiper>
				<!-- 左右箭头 -->
				......
			</div>
		</div>
	</div>
</template>

接着在swiperOption里，将原来的prevButton: ‘.swiper-button-prev’,这种改为 ‘#swiper-top .swiper-button-prev’。

swiperOption: {
					....
					prevButton: '#swiper-top .swiper-button-prev',
					nextButton: '#swiper-top .swiper-button-next'
				},

同理，对下方轮播也进行上述操作。
最后将它们两引入index.vue即可（本文中两个轮播在不同vue文件里写着）。