一个页面使用多个swiper冲突

2 篇文章 0 订阅

点击上面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文件里写着)。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值