Swiper.js 放置在容器外部的导航按钮无法控制轮播切换问题求助

问题根因 #

• DOM标签闭合错误，导致Swiper初始化时解析结构异常
• 缺少外层.slider-main相对定位容器，按钮的绝对定位基准错误，同时DOM结构层级异常导致Swiper绑定按钮失效
• 自定义按钮未设置可点击的宽高区域，点击事件无法触发
• 部分场景下Swiper初始化早于DOM加载完成，导致按钮绑定失败

具体修改方案 #

1. 修正HTML结构 #

补全外层包裹容器，修正所有错误的闭合标签：

<!-- 补全外层.slider-main容器，包裹按钮和swiper -->
<div class="slider-main">
  <div class="button-swiper-wrapper">
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <div class="swiper swiper-master-card">
    <div class="wrapper-card-list swiper-wrapper">
      <div class="wrapper-content-card swiper-slide">
        <div class="wrapper-images">
          <img class="image-card" src="{% static "img/door_2.png" %}" alt="Изображение открытой двери">
        </div>
      </div>
      <div class="wrapper-content-card swiper-slide">
        <div class="wrapper-images">
          <img class="image-card" src="{% static "img/door_2.png" %}" alt="Изображение открытой двери">
        </div>
      </div>
      <div class="wrapper-content-card swiper-slide">
        <div class="wrapper-images">
          <img class="image-card" src="{% static "img/door_2.png" %}" alt="Изображение открытой двери">
        </div>
      </div>
    </div> 
  </div>
</div>

2. 修正CSS样式 #

给按钮增加可点击宽高，调整定位逻辑避免溢出：

.slider-main {
  position: relative;
  width: fit-content;
}
.swiper {
  width: 375px;
  height: 350px;
  padding-right: 100px !important;
}
/* 给按钮设置固定宽高，确保有可点击区域 */
.swiper-button-prev, .swiper-button-next {
  position: static !important;
  width: 40px;
  height: 40px;
}
.swiper-button-prev {
  margin-bottom: 50px;
}
.button-swiper-wrapper {
  position: absolute;
  top: 40%;
  right: 10px;
}

3. 修正JS初始化逻辑 #

确保DOM加载完成后再初始化Swiper，同时确认导航按钮选择器对应正确：

// import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { Navigation, Pagination } from 'swiper';

Swiper.use([Navigation, Pagination]);

// 等待DOM完全加载后再初始化
document.addEventListener('DOMContentLoaded', () => {
  const swiper = new Swiper('.swiper', {
    direction: 'vertical',
    initialSlide:1,
    loop: true,
    slidesPerView: 3,
    spaceBetween: 12,
    mousewheel: true,
    navigation: {
      // 不需要反向控制就保持如下配置，需要反向控制再替换为你原来的写法
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    grabCursor: true,
  });
})

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