轮播图组件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>
