Swiper JS：如何在指定断点初始化轮播滑块

问题现状 #

需要实现：

• 桌面端（宽度>760px）：同时显示3个幻灯片，无轮播功能
• 移动端（宽度≤760px）：初始化带分页的滑动轮播，仅显示1个幻灯片

当前尝试在Swiper配置的breakpoints中设置init属性，但功能未正常生效。

问题原因 #

Swiper的breakpoints配置中的init参数不会自动触发组件的初始化或销毁，仅在组件首次初始化时读取对应断点的配置。要实现响应式的初始化/销毁，需要手动监听窗口尺寸变化，主动控制Swiper实例的创建与销毁。

实现步骤 #

1. 调整CSS样式 #

确保桌面端和移动端的布局正确区分：

body {
  font-family: sans-serif;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  overflow-x: hidden;
  height: 100vh;
  display: flex;
  background-color: #333;
}

.tabs__body {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  align-items: center;
  width: 100%;
}

.tabs__content {
  list-style-type: none;
  display: flex;
  gap: 16px;
  max-height: 180px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  justify-content: center;
  padding: 0;
}

.tabs__bike-block {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
}

.tabs__bike-img {
  max-width: 380px;
  max-height: 180px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tabs__pagination {
  display: none;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

/* 移动端样式 */
@media screen and (max-width: 760px) {
  .tabs__pagination {
      display: block;
  }
  
  .tabs__content {
      max-width: 280px;
      gap: 0;
  }
  
  .tabs__content.swiper-wrapper {
    display: flex !important;
  }
  
  .tabs__bike-block {
    max-width: 100%;
    min-width: auto;
  }
}

/* 桌面端隐藏Swiper相关样式 */
@media screen and (min-width: 761px) {
  .swiper-pagination {
    display: none !important;
  }
}

2. 修改JavaScript逻辑 #

手动监听窗口 resize 事件，根据屏幕宽度控制Swiper的初始化与销毁：

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./index.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
    />
  </head>
  <body>
    <div class="tabs__body">
      <ul class="tabs__content swiper-wrapper">
        <li class="tabs__bike-block swiper-slide">
          <a href="#" class="tabs__link">
            <img
              src="https://ir.ozone.ru/s3/cms/84/t6c/wc500/336x336_mountain.jpg"
              alt="山地车"
              class="tabs__bike-img"
            />
          </a>
        </li>
        <li class="tabs__bike-block swiper-slide">
          <a href="#" class="tabs__link">
            <img
              src="https://ir.ozone.ru/s3/cms/1d/t32/wc500/336x336_highway.jpg"
              alt="公路车"
              class="tabs__bike-img"
            />
          </a>
        </li>
        <li class="tabs__bike-block swiper-slide">
          <a href="#" class="tabs__link">
            <img
              src="https://ir.ozone.ru/s3/cms/db/tb1/wc500/336x336_city.jpg"
              alt="城市车"
              class="tabs__bike-img"
            />
          </a>
        </li>
      </ul>
      <div class="tabs__pagination swiper-pagination"></div>
    </div>
    <script type="module">
      import Swiper from "https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.mjs";

      let bikeSlider = null;
      const MOBILE_BREAKPOINT = 760;

      // 初始化Swiper
      function initSwiper() {
        if (bikeSlider) return;
        bikeSlider = new Swiper(".tabs__body", {
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          slidesPerView: 1,
          slidesPerGroup: 1,
          initialSlide: 0,
          loop: true,
          loopedSlides: 1,
          effect: "creative",
          creativeEffect: {
            prev: {
              opacity: 1,
            },
            next: {
              opacity: 1,
            },
          },
          allowTouchMove: true,
        });
      }

      // 销毁Swiper
      function destroySwiper() {
        if (!bikeSlider) return;
        bikeSlider.destroy(true, true);
        bikeSlider = null;
      }

      // 根据屏幕宽度切换状态
      function handleResponsive() {
        const windowWidth = window.innerWidth;
        windowWidth <= MOBILE_BREAKPOINT ? initSwiper() : destroySwiper();
      }

      // 页面加载时执行一次
      handleResponsive();

      // 窗口 resize 防抖处理
      let resizeTimer;
      window.addEventListener("resize", () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(handleResponsive, 200);
      });
    </script>
  </body>
</html>

关键说明 #

• 防抖处理：窗口 resize 事件添加防抖，避免频繁触发初始化/销毁操作，提升性能
• DOM恢复：销毁Swiper时使用destroy(true, true)，完全恢复原始DOM结构，确保桌面端布局正常
• 样式隔离：通过媒体查询明确区分桌面端和移动端的样式，避免Swiper样式干扰桌面布局

内容的提问来源于stack exchange，提问作者Harpeng