Swiper JS轮播问题：最后3张幻灯片左侧滑块露出且阴影残留

您好，这是我第一次在Stack Overflow发帖。

我在使用Swiper JS实现轮播组件时遇到问题：当轮播到最后3张幻灯片时，左侧会有一张幻灯片露出。我尝试通过设置padding解决该问题，但滑块的阴影仍然残留，恳请各位提供解决方案。

我的代码： #

CSS代码：

.recommend {
  height: 220px;
  width: 100%;
  background-color: rgb(237, 235, 233);
  line-height: 24px;
  margin-bottom: 40px;
  margin-top: 24px;
  padding-bottom: 64px;
  padding-top: 32px;
}
.recommend .swiper{
  width: 1140px;
  padding: 0px 0px 0px 0px;;
  overflow: hidden;
}
.recommend  .swiper-slide {
  background-color: white;
  height: 126px;
  width: 313px !important;
  border-radius: 8px;
  padding-bottom: 16px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 16px;
  flex-direction: column;
  margin: 15px;
  margin-right: 0px;
}

HTML代码：

<section class="recommend">
    <div class="swiper mySwiper3">
        <div class="swiper-wrapper">
          <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>
</section>

解决方案 #

1. 改用Swiper原生配置控制间距与显示数量
   别用CSS的margin给滑块加间距，直接用Swiper初始化时的spaceBetween参数设置间距，同时通过slidesPerView指定每页显示的滑块数，让Swiper自动计算容器布局，避免溢出。
   初始化代码示例：

const swiper = new Swiper('.mySwiper3', {
  slidesPerView: 3,
  spaceBetween: 15,
  loop: false
});

同时删除CSS中.swiper-slide的margin相关样式，避免和Swiper配置冲突。

2. 修复阴影残留问题
   如果滑块有阴影导致溢出容器后残留，给.recommend .swiper添加clip-path: inset(0 0 0 0);，强制截断容器外的所有元素；或者把阴影放在滑块的::before伪元素里，限制伪元素的范围不超出滑块边界。

3. 可选：添加容器内边距优化布局
   如果需要左右留白，给.recommend .swiper设置padding: 0 15px;，同时开启centeredSlides: true，让轮播时当前滑块居中，进一步避免边缘露出多余内容。

内容的提问来源于stack exchange，提问作者muhammed alhadh a.n