轮播图组件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>
复制代码

  

 

posted @   carol2014  阅读(451)  评论(0)  编辑  收藏  举报
相关博文：
· bootstrap之carousel轮播图自定义分页器
· swiper轮播图插件简单使用
· 【Web开发】基于swiper插件的轮播图实现
· 运动(下)
· 关于Swiper的初尝试
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示