swiper一个页面多个轮播

最新推荐文章于 2025-05-23 11:31:21 发布

原创最新推荐文章于 2025-05-23 11:31:21 发布 · 5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#swiper轮播问题 #swiper实现多个轮播 #用swiper写轮播在一个页面中多次使用

本文详细解析了使用Swiper实现多个轮播图时出现的控制冲突问题，通过调整类名和初始化参数，成功实现了独立控制每个轮播图，避免了相互影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常遇到来寻找这个的都是因为轮播不受控制，我们就来看一看用swiper轮播的坑

<!-- 第一个轮播-->
			<div class="lunbo">
				<div class="swiper-container banner_swiper1">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="image/benqiang_img03.png" alt="">
						</div>
						<div class="swiper-slide">
							<img src="image/benqiang_img03.png" alt="">
						</div>
						<div class="swiper-slide">
							<img src="image/benqiang_img03.png" alt="">
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			
<!-- 第二个轮播-->
			
			<div class="lunbo1">
					<div class="swiper-container banner_swiper2">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<img src="image/benqiang_cat01.jpg" alt="">
							</div>
							<div class="swiper-slide">
								<img src="image/benqiang_cat02.jpg" alt="">
							</div>
							<div class="swiper-slide">
								<img src="image/benqiang_cat03.jpg" alt="">
							</div>
						</div>	
					</div>
					<div class="swiper-button-prev z_anniu1 swiper-button-white"></div>
    				<div class="swiper-button-next y_anniu1 swiper-button-white"></div>
				</div>
				
<!-- 第三个轮播-->

				<div class="lunbo2">
					<div class="swiper-container banner_swiper3">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<img src="image/benqiang_zhizi01.jpg" alt="">
							</div>
							<div class="swiper-slide">
								<img src="image/benqiang_zhizi02.jpg" alt="">
							</div>
							<div class="swiper-slide">
								<img src="image/benqiang_zhizi03.jpg" alt="">
							</div>
							<div class="swiper-slide">
								<img src="image/benqiang_zhizi04.jpg" alt="">
							</div>
							<div class="swiper-slide">
								<img src="image/benqiang_zhizi05.jpg" alt="">
							</div>
						</div>	
					</div>
					<div class="swiper-button-prev z_anniu2 swiper-button-white"></div>
    				<div class="swiper-button-next y_anniu2 swiper-button-white"></div>
				</div>
			</div>

var mySwiper1 = new Swiper('.banner_swiper1', {
	autoplay: 5000,//可选选项，自动滑动
	autoplayDisableOnInteraction : false,
	loop : true,
	pagination : '.swiper-pagination',
	paginationClickable :true,
	paginationBulletRender: function (swiper, index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
  	}
})
var mySwiper2 = new Swiper('.banner_swiper2', {
	loop : true,
	slidesPerView : 3,
	slidesPerGroup : 1,
	prevButton:'.z_anniu1',
	nextButton:'.y_anniu1',
})
var mySwiper3 = new Swiper('.banner_swiper3', {
	loop : true,
	slidesPerView : 5,
	prevButton:'.z_anniu2',
	nextButton:'.y_anniu2',
})

直接上代码来分析一下，当时我遇到的问题就是有3个轮播，开始是我还在弄第二个就出现了问题，给第二个轮播设置左右按钮的时候并不会显示在第二个轮播上面也不是控制第二个的，而是显示和控制在第一个轮播上面，然而改了类名后可以实现控制第二个了，但是又有问题，他会连同第一个一起控制，这个时候就单独的添加一个类名，但是必须要加上以前的"swiper-container"这个类名，不然还是没有用，所以就单独给出不同的类名控制每一个，这样不管怎么设置都不会起冲突，最好的话把js部分var mySwiper1, 2，3，不同的名字看完赶紧去试试吧