Swiper导航按钮功能修复及Next按钮单次点击后禁用需求

需求说明 #

• 修复当前右侧next按钮兼具前进/后退的异常问题，实现next仅前进、prev仅后退的标准交互
• 实现点击一次next按钮后将其禁用的功能

原实现代码 #

Swiper初始化代码 #

var swiper = new Swiper(".slide-content", {
  slidesPerView: 3,
  spaceBetween: 25,
  loop: true,
  centerSlide: 'true',
  fade: 'true',
  grabCursor: 'true',
  slidesPerGroup: 3,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    dynamicBullets: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  breakpoints:{
      0: {
          slidesPerView: 1,
      },
      520: {
          slidesPerView: 2,
      },
      950: {
          slidesPerView: 3,
      },
  },
});

HTML结构 #

<div class="slide-container swiper">
  <div class="sldsss"> 
    <div class="imgg">
      <img src="/static/aaa/dr.png" alt="" class="card-img">
    </div>
    <div class="slide-content">
      <div class="card-wrapper swiper-wrapper">
        <div class="card swiper-slide">
          <div class="pscc">
            <div id="cap1" class="card-image">
              <img src="/static/aaa/cp.png" alt="" class="card-img">
            </div>
          </div>
          <video id="vdd1" class="vdd1" src="/static/aaa/videodr.mp4" controls>
            <p>您的浏览器不支持视频播放。</p>
          </video>
          <div onclick="ply1()" id="pl1" class="pl1">
            <a href="##">
              <ion-icon class="pll1" name="play-circle-outline"></ion-icon>
            </a>
          </div>
        </div>

        <div class="card swiper-slide">
          <div class="image-content">
            <div id="cap2" class="card-image0">
              <img src="/static/aaa/cp2.png" alt="" class="card-img0">
            </div>
          </div>
          <video id="vdd2" class="vdd2" src="/static/aaa/vd2.mp4" controls>
            <p>您的浏览器不支持视频播放。</p>
          </video>
          <div id="pl2" onclick="ply2()" class="pl2">
            <a href="##">
              <ion-icon class="pll1" name="play-circle-outline"></ion-icon>
            </a>
          </div>
        </div>

        <div class="card swiper-slide">
          <div class="image-content">
            <div id="cap3" class="card-image1">
              <img src="/static/aaa/cp3.png" alt="" class="card-img1">
            </div>
          </div>
          <video id="vdd3" class="vdd3" src="/static/aaa/vd3.mp4" controls>
            <p>您的浏览器不支持视频播放。</p>
          </video>
          <div id="pl3" onclick="ply3()" class="pl3">
            <a href="##">
              <ion-icon class="pll1" name="play-circle-outline"></ion-icon>
            </a>
          </div>
        </div>

        <div class="card swiper-slide">
          <div class="image-content">
            <div class="card-image2">
              <img src="/static/aaa/cp4.jpg" alt="" class="card-img2">
            </div>
          </div>
        </div>

        <div class="card swiper-slide">
          <div class="image-content">
            <div class="card-image3">
              <img src="/static/aaa/cp5.jpg" alt="" class="card-img3">
            </div>
          </div>
        </div>

        <div class="card swiper-slide">
          <div class="image-content">
            <div class="card-image4">
              <img src="/static/aaa/cp6.jpg" alt="" class="card-img4">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="swiper-button-next swiper-navBtn"></div>
    <div class="swiper-button-prev swiper-navBtn"></div>
    <div class="swiper-pagination"></div>
  </div>
</div>

解决方案 #

1. 修复导航按钮功能异常 #

问题根源：开启loop: true后，Swiper会复制首尾幻灯片实现循环，结合slidesPerGroup: 3会导致按钮逻辑混乱；同时原配置中布尔值属性写成了字符串格式（如centerSlide: 'true'），虽不报错但不符合规范。

方案一：关闭循环模式（推荐）

直接关闭loop，恢复标准导航逻辑，同时修正布尔值写法：

var swiper = new Swiper(".slide-content", {
  slidesPerView: 3,
  spaceBetween: 25,
  loop: false, // 关闭循环模式
  centerSlide: true, // 修正为布尔值
  fade: true, // 修正为布尔值
  grabCursor: true, // 修正为布尔值
  slidesPerGroup: 3,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    dynamicBullets: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  breakpoints:{
      0: {
          slidesPerView: 1,
      },
      520: {
          slidesPerView: 2,
      },
      950: {
          slidesPerView: 3,
      },
  },
});

方案二：保留循环模式，强制控制按钮行为

若必须保留loop: true，通过原生事件强制指定按钮动作：

// 强制next按钮仅执行前进
document.querySelector(".swiper-button-next").addEventListener("click", function(e) {
  e.stopPropagation();
  swiper.slideNext();
});

// 强制prev按钮仅执行后退
document.querySelector(".swiper-button-prev").addEventListener("click", function(e) {
  e.stopPropagation();
  swiper.slidePrev();
});

2. 实现next按钮点击一次后禁用 #

添加点击事件监听，点击后禁用按钮并添加禁用样式：

const nextBtn = document.querySelector(".swiper-button-next");

nextBtn.addEventListener("click", function() {
  this.disabled = true;
  this.classList.add("swiper-button-disabled"); // 复用Swiper默认禁用类
});

可选：结合轮播状态，确保到达最后一组幻灯片时也禁用按钮：

swiper.on("slideChange", function() {
  if (nextBtn.disabled) return;
  // 当轮播到最后一组时禁用next
  if (this.isEnd) {
    nextBtn.disabled = true;
    nextBtn.classList.add("swiper-button-disabled");
  }
});

补充CSS样式 #

自定义禁用按钮的视觉效果：

.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

内容的提问来源于stack exchange，提问作者THIAGÃO4K