jquery实现tab切换内容为几个不同swiper.js轮播插件模块的代码

做一个点击指定元素切换指定内容的页面模块（TAB切换），要切换的内容是独立的swiper.js轮播插件模块，如果先swiper初始化轮播内容，然后实现tab切换就会出现各轮播模块冲突，比如前进后退按钮异常、分页器异常、切换时内容加载异常等。可以避免各轮播模块冲突的方法是点击切换时再初始化当前的swiper轮播，其它的swiper轮播则注销掉。

HTML代码：

<script src="js/swiper-bundle.min.js"></script>
<div class="videos">
	<div class="tab">
		<span>动漫</span>
		<span>电影</span>
		<span>综艺</span>
	</div>
	<div class="cont">
		<div class="list">
			<div class="swiper">
				<div class="swiper-wrapper">
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
				</div>
			</div>
		</div>
		
		<div class="list">
			<div class="swiper">
				<div class="swiper-wrapper">
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
				</div>
			</div>
		</div>
		
		<div class="list">
			<div class="swiper">
				<div class="swiper-wrapper">
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
				</div>
			</div>
		</div>
		
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</div>

CSS代码：

.videos .list {display:none;}

美化的样式代码这里不写。

jQuery代码：

$(function(){
	$('.videos .list').each(function(e){
		$(this).find('.swiper').attr('data-swiper',e);
	});
	var swipervideo;
	var swiperspan = $('.videos .tab span');
	swiperspan.click(function(){        
		$(this).addClass('cur').siblings('span').removeClass('cur');
		var _index = $(this).index();
		var _this = $(this).parents('.tab').siblings('.cont').find('.list').eq(_index);
		var _swiperid = _this.find('.swiper').attr('data-swiper');
		_this.stop().fadeIn('fast').siblings('.list').hide();
		if(typeof swipervideo != 'undefined'){
			swipervideo.destroy();
		}
		swipervideo = new Swiper('.videos .swiper[data-swiper="'+_swiperid+'"]',{
			slidesPerView: 3,
			spaceBetween:'2%',
			loop:true,
			autoplay: {
				delay: 5000,
				stopOnLastSlide: false,
				disableOnInteraction: true,
			},
			pagination: {
				el: '.videos .swiper-pagination',
				clickable:true,
			},
			navigation: {
				nextEl: '.videos .swiper-button-next',
				prevEl: '.videos .swiper-button-prev',
			},
			breakpoints: { 
				0: {
					slidesPerView: 1,
				},
				769: {
					slidesPerView: 2,
				},
				1025: {
					slidesPerView: 3,
				}
			}
		});
		
	});
	swiperspan.eq(0).trigger('click');
});

上面的代码基于Swiper 8.4.7版本，但方法思路是一样的。