如何实现Swiper轮播仅对边缘截断幻灯片添加渐变淡出效果

核心逻辑 #

效果要求：轮播容器边缘仅对被截断的幻灯片添加渐变淡出遮罩，滚动到轮播最左端时隐藏左侧遮罩，滚动到最右端时隐藏右侧遮罩，中间滚动状态同时显示两侧遮罩，遮罩不拦截鼠标/触摸滑动操作。

具体代码修改 #

1. 调整HTML结构 #

在原有.swiper容器内部新增左右两个渐变遮罩层，最终HTML代码如下：

<div class="container">
  <div class="swiper">
    <!-- 左侧渐变遮罩 -->
    <div class="swiper-edge-mask swiper-edge-mask-left"></div>
    <!-- 右侧渐变遮罩 -->
    <div class="swiper-edge-mask swiper-edge-mask-right"></div>
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
    </div>
  </div>
</div>

2. 补充CSS样式 #

在原有CSS基础上新增遮罩层样式，给.swiper容器加相对定位作为遮罩的定位参考，同时设置遮罩不拦截交互事件：

.swiper {
  position: relative;
}

.swiper-slide {
  width: 300px !important;
  height: 200px !important;
  text-decoration: none;
  background-color: gray;
  border-radius: 10px;
  color: white;
  background: rgb(203, 203, 203);
}

.container {
  padding: 60px 120px 60px 120px;
}

/* 边缘遮罩通用样式 */
.swiper-edge-mask {
  position: absolute;
  top: 0;
  height: 100%;
  width: 80px; /* 遮罩宽度可根据视觉需要调整 */
  z-index: 10;
  pointer-events: none; /* 不拦截滑动、点击等交互事件 */
  transition: opacity 0.2s ease;
}

/* 左侧遮罩：从页面背景色渐变到透明 */
.swiper-edge-mask-left {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}

/* 右侧遮罩：从透明渐变到页面背景色 */
.swiper-edge-mask-right {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}

/* 遮罩隐藏状态 */
.swiper-edge-mask.hide {
  opacity: 0;
}

注意：如果你的页面背景不是纯白色，把遮罩渐变里的#ffffff替换成对应页面背景色即可。

3. 调整JS初始化逻辑 #

监听Swiper的初始化、滑动、窗口尺寸变化事件，根据当前滚动位置动态控制左右遮罩的显示/隐藏：

const swiper = new Swiper('.swiper', {
  slidesPerView: 'auto',
  spaceBetween: 30,
  freeMode: true,
  freeModeSticky: false,
  watchSlidesProgress: true,
  watchSlidesVisibility: true,
  on: {
    // 初始化时执行一次遮罩状态判断
    init: function() {
      updateEdgeMaskStatus(this);
    },
    // 切换幻灯片时更新遮罩状态
    slideChange: function() {
      updateEdgeMaskStatus(this);
    },
    // freeMode自由滚动时实时更新遮罩状态
    progress: function() {
      updateEdgeMaskStatus(this);
    },
    // 窗口尺寸变化时重新判断位置
    resize: function() {
      updateEdgeMaskStatus(this);
    }
  }
});

// 遮罩状态更新通用方法
function updateEdgeMaskStatus(swiperInstance) {
  const leftMask = document.querySelector('.swiper-edge-mask-left');
  const rightMask = document.querySelector('.swiper-edge-mask-right');
  
  // 滚动到最起点：隐藏左遮罩
  if (swiperInstance.isBeginning) {
    leftMask.classList.add('hide');
    rightMask.classList.remove('hide');
    return;
  }
  // 滚动到最末尾：隐藏右遮罩
  if (swiperInstance.isEnd) {
    rightMask.classList.add('hide');
    leftMask.classList.remove('hide');
    return;
  }
  // 中间滚动位置：两侧遮罩都显示
  leftMask.classList.remove('hide');
  rightMask.classList.remove('hide');
}

可调参数说明 #

• 遮罩覆盖范围：修改.swiper-edge-mask的width值即可调整渐变的覆盖宽度
• 渐变柔和度：修改linear-gradient的色标位置可以调整渐变过渡的生硬/柔和程度
• 显隐动画速度：调整.swiper-edge-mask的transition属性值即可修改遮罩显隐的动画时长

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