Vue.js中Swiper前后切换按钮不显示问题求助

你需要实现仅显示上一个、当前激活、下一个分页按钮的Swiper，目前只有激活按钮可见，核心问题是你手动添加的swiper-button-prev/swiper-button-next类不会被Swiper自动维护，且loop模式下分页的索引逻辑需要特殊处理。以下是可行的解决方案：

步骤1：修正HTML结构 #

移除手动添加的静态状态类，让Swiper自动生成分页元素，避免静态标记无法随滑块切换更新：

<div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div>

步骤2：修改Swiper配置，动态标记分页按钮 #

通过renderBullet自定义分页按钮，并在slideChange事件中实时更新每个按钮的状态类（上一个、当前、下一个），适配loop模式的索引逻辑：

export default {
  name: 'Home',
  components: {
    Swiper
  },
  mounted(){
    const swiper = new Swiper('.blog-slider', {
      spaceBetween: 30,
      effect: 'fade',
      direction: 'horizontal',
      loop: true,
      mousewheel: {
        invert: false,
      },
      pagination: {
        el: '.blog-slider__pagination',
        clickable: true,
        // 自定义分页按钮，绑定原始索引
        renderBullet: function (index, className) {
          return `<span class="${className}" data-slide-index="${index}"></span>`;
        }
      },
      // 滑块切换时更新分页按钮状态
      on: {
        slideChange: function () {
          const currentRealIndex = this.realIndex;
          const totalRealSlides = this.slides.length - 2; // loop模式下首尾是复制滑块，需剔除

          // 清空所有旧状态类
          document.querySelectorAll('.swiper-pagination-bullet').forEach(bullet => {
            bullet.classList.remove('prev-slide', 'next-slide');
          });

          // 标记上一个按钮（处理loop循环边界）
          const prevIndex = currentRealIndex === 0 ? totalRealSlides - 1 : currentRealIndex - 1;
          document.querySelector(`.swiper-pagination-bullet[data-slide-index="${prevIndex}"]`)?.classList.add('prev-slide');

          // 标记下一个按钮（处理loop循环边界）
          const nextIndex = currentRealIndex === totalRealSlides - 1 ? 0 : currentRealIndex + 1;
          document.querySelector(`.swiper-pagination-bullet[data-slide-index="${nextIndex}"]`)?.classList.add('next-slide');
        }
      }
    });

    // 初始化时手动触发一次状态更新，确保初始显示正确
    swiper.emit('slideChange');
  }
}

步骤3：调整CSS样式 #

根据动态添加的prev-slide和next-slide类控制显示，保留你原有的样式逻辑：

.swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  display: none; // 默认隐藏所有按钮
  border-radius: 10px;
  background: #062744;
  opacity: 0.2;
  transition: all .3s;
  cursor: pointer;

  // 仅显示当前激活、上一个、下一个按钮
  &.swiper-pagination-bullet-active,
  &.prev-slide,
  &.next-slide {
    display: block;
  }

  &.swiper-pagination-bullet-active {
    opacity: 1;
    background: #747474;
    height: 30px;
    box-shadow: 0px 0px 20px rgba(109, 109, 109, 0.3);

    @media screen and (max-width: 768px) {
      height: 11px;
      width: 30px;
    }
  }
}

关键说明 #

• 使用realIndex获取loop模式下的真实滑块索引，避免首尾复制滑块的干扰
• 通过data-slide-index绑定分页按钮与原始滑块的对应关系，确保切换时能准确定位上/下按钮
• 初始化时手动触发slideChange，保证页面加载时就显示正确的三个按钮

内容的提问来源于stack exchange，提问作者Jan Tuđan