轮播图组件swiper之两个轮播图同步
试用下一个 swiper 轮播图作为另一个 swiper 轮播图的分页器，解决同步问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="./plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="plugins/swiper-8.3.0/swiper-bundle.min.css" rel="stylesheet" />
<script src="./plugins/jquery/jquery-3.3.1.js"></script>
<script src="./plugins/bootstrap-5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="plugins/swiper-8.3.0/swiper-bundle.min.js"></script>
<style>
body {
background-color: aqua;
}
#swiper3 .swiper-slide {
height: 600px;
line-height: 600px;
text-align: center;
border: 1px solid blue;
}
#swiper1 .swiper-slide {
text-align: center;
padding-top: 10px;
}
#swiper1 .swiper-slide.active {
background-color: blue;
color: white;
}
.swiper-button-next,
.swiper-button-prev {
color: black;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row mt-3 g-1">
<div class="col-2">
<div class="card">
<div class="swiper" style="width: 100%; height: 600px" id="swiper1">
<div class="swiper-wrapper">
<div data-swiper-slide-index="0" class="swiper-slide active">Item0</div>
<div data-swiper-slide-index="1" class="swiper-slide">Item1</div>
<div data-swiper-slide-index="2" class="swiper-slide">Item2</div>
<div data-swiper-slide-index="3" class="swiper-slide">Item3</div>
<div data-swiper-slide-index="4" class="swiper-slide">Item4</div>
<div data-swiper-slide-index="5" class="swiper-slide">Item5</div>
<div data-swiper-slide-index="6" class="swiper-slide">Item6</div>
<div data-swiper-slide-index="7" class="swiper-slide">Item7</div>
<div data-swiper-slide-index="8" class="swiper-slide">Item8</div>
<div data-swiper-slide-index="9" class="swiper-slide">Item9</div>
<div data-swiper-slide-index="10" class="swiper-slide">Item10</div>
<div data-swiper-slide-index="11" class="swiper-slide">Item11</div>
<div data-swiper-slide-index="12" class="swiper-slide">Item12</div>
<div data-swiper-slide-index="13" class="swiper-slide">Item13</div>
<div data-swiper-slide-index="14" class="swiper-slide">Item14</div>
<div data-swiper-slide-index="15" class="swiper-slide">Item15</div>
<div data-swiper-slide-index="16" class="swiper-slide">Item16</div>
<div data-swiper-slide-index="17" class="swiper-slide">Item17</div>
<div data-swiper-slide-index="18" class="swiper-slide">Item18</div>
<div data-swiper-slide-index="19" class="swiper-slide">Item19</div>
<div data-swiper-slide-index="20" class="swiper-slide">Item20</div>
<div data-swiper-slide-index="21" class="swiper-slide">Item21</div>
<div data-swiper-slide-index="22" class="swiper-slide">Item22</div>
<div data-swiper-slide-index="23" class="swiper-slide">Item23</div>
<div data-swiper-slide-index="24" class="swiper-slide">Item24</div>
<div data-swiper-slide-index="25" class="swiper-slide">Item25</div>
<div data-swiper-slide-index="26" class="swiper-slide">Item26</div>
<div data-swiper-slide-index="27" class="swiper-slide">Item27</div>
<div data-swiper-slide-index="28" class="swiper-slide">Item28</div>
<div data-swiper-slide-index="29" class="swiper-slide">Item29</div>
<div data-swiper-slide-index="30" class="swiper-slide">Item30</div>
<div data-swiper-slide-index="31" class="swiper-slide">Item31</div>
<div data-swiper-slide-index="32" class="swiper-slide">Item32</div>
<div data-swiper-slide-index="33" class="swiper-slide">Item33</div>
<div data-swiper-slide-index="34" class="swiper-slide">Item34</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
<div class="col-10">
<div class="card">
<div class="swiper" style="width: 100%; height: 600px" id="swiper3">
<div class="swiper-wrapper">
<div data-swiper-slide-index="0" class="swiper-slide active">Item0</div>
<div data-swiper-slide-index="1" class="swiper-slide">Item1</div>
<div data-swiper-slide-index="2" class="swiper-slide">Item2</div>
<div data-swiper-slide-index="3" class="swiper-slide">Item3</div>
<div data-swiper-slide-index="4" class="swiper-slide">Item4</div>
<div data-swiper-slide-index="5" class="swiper-slide">Item5</div>
<div data-swiper-slide-index="6" class="swiper-slide">Item6</div>
<div data-swiper-slide-index="7" class="swiper-slide">Item7</div>
<div data-swiper-slide-index="8" class="swiper-slide">Item8</div>
<div data-swiper-slide-index="9" class="swiper-slide">Item9</div>
<div data-swiper-slide-index="10" class="swiper-slide">Item10</div>
<div data-swiper-slide-index="11" class="swiper-slide">Item11</div>
<div data-swiper-slide-index="12" class="swiper-slide">Item12</div>
<div data-swiper-slide-index="13" class="swiper-slide">Item13</div>
<div data-swiper-slide-index="14" class="swiper-slide">Item14</div>
<div data-swiper-slide-index="15" class="swiper-slide">Item15</div>
<div data-swiper-slide-index="16" class="swiper-slide">Item16</div>
<div data-swiper-slide-index="17" class="swiper-slide">Item17</div>
<div data-swiper-slide-index="18" class="swiper-slide">Item18</div>
<div data-swiper-slide-index="19" class="swiper-slide">Item19</div>
<div data-swiper-slide-index="20" class="swiper-slide">Item20</div>
<div data-swiper-slide-index="21" class="swiper-slide">Item21</div>
<div data-swiper-slide-index="22" class="swiper-slide">Item22</div>
<div data-swiper-slide-index="23" class="swiper-slide">Item23</div>
<div data-swiper-slide-index="24" class="swiper-slide">Item24</div>
<div data-swiper-slide-index="25" class="swiper-slide">Item25</div>
<div data-swiper-slide-index="26" class="swiper-slide">Item26</div>
<div data-swiper-slide-index="27" class="swiper-slide">Item27</div>
<div data-swiper-slide-index="28" class="swiper-slide">Item28</div>
<div data-swiper-slide-index="29" class="swiper-slide">Item29</div>
<div data-swiper-slide-index="30" class="swiper-slide">Item30</div>
<div data-swiper-slide-index="31" class="swiper-slide">Item31</div>
<div data-swiper-slide-index="32" class="swiper-slide">Item32</div>
<div data-swiper-slide-index="33" class="swiper-slide">Item33</div>
<div data-swiper-slide-index="34" class="swiper-slide">Item34</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3"><button id="btn1" class="btn">启用</button> <button id="btn2" class="btn">禁用</button></div>
</body>
<script>
let perPage = 15;
let size = 35;
var mySwiper1 = new Swiper("#swiper1", {
initialSlide: 0,
direction: "vertical",
grabCursor: true,
slidesPerView: perPage,
autoplay: {
delay: 2000,
stopOnLastSlide: false,
pauseOnMouseEnter: true,
disableOnInteraction: false,
},
centeredSlides: true,
loop: true,
on: {
autoplay: function () {
$("#swiper1 .swiper-slide").eq(this.activeIndex).addClass("active").siblings().removeClass("active");
},
autoplayPause: function () {
mySwiper2.autoplay.stop();
},
autoplayResume: function () {
mySwiper2.autoplay.start();
},
click: function () {
let index;
if (this.clickedIndex < perPage) {
index = this.clickedIndex - perPage + size + 1;
} else if (this.clickedIndex > perPage + size) {
index = this.clickedIndex - perPage - size + 1;
} else {
index = this.clickedIndex - perPage + 1;
}
console.log(this.activeIndex, this.clickedIndex, index);
mySwiper2.slideTo(index, 1000, false);
},
},
scrollbar: {
el: ".swiper-scrollbar",
hide: false,
},
});
$("#btn1").click(function () {
mySwiper1.autoplay.start();
mySwiper2.autoplay.start();
});
$("#btn2").click(function () {
mySwiper1.autoplay.stop();
mySwiper2.autoplay.stop();
});
</script>
<script>
var mySwiper2 = new Swiper("#swiper3", {
initialSlide: 0,
rewind: true,
// effect: "fade",
grabCursor: true,
autoplay: {
delay: 2000,
stopOnLastSlide: false,
pauseOnMouseEnter: true,
disableOnInteraction: false,
},
loop: true,
on: {
autoplayPause: function () {
mySwiper1.autoplay.stop();
},
autoplayResume: function () {
mySwiper1.autoplay.start();
},
slideChange: function () {
mySwiper1.slideTo(this.activeIndex + perPage - 1, 1000, false);
$("#swiper1 .swiper-slide")
.eq(this.activeIndex + perPage - 1)
.addClass("active")
.siblings()
.removeClass("active");
},
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</html>
浙公网安备 33010602011771号