Swiper设置slidesPerView为3时如何配置激活slide宽度 需居中展示3个slide

核心问题说明 #

原有配置存在冲突：当设置slidesPerView: 3时，Swiper会自动根据容器宽度计算每个slide的宽度，你自定义的CSS宽度规则会被覆盖，无法实现激活态宽度自定义的效果。

修改步骤 #

配置项修改 #

• 启用注释掉的slidesPerView: "auto"，关闭固定数量的自动宽度计算，只有该模式下自定义的slide宽度规则才会生效
• 修正loop参数错误，loop为布尔类型，改为loop: true即可，原loop: 3属于无效配置
• 保留centeredSlides: true即可满足激活态slide始终居中的需求
• 可根据实际容器宽度调整spaceBetween参数，避免间距过大导致一屏无法展示3个slide

CSS修改 #

• 给.swiper-slide新增flex-shrink: 0属性，避免slide被自动压缩宽度
• 调整宽度数值，确保「激活态slide宽度 + 左右两个普通slide宽度 + 2倍spacing间距」总宽度不超过Swiper容器宽度，即可保证一屏同时展示3个slide

修改后完整代码 #

<style>        
    .swiper-slide {
       width:15%;
       flex-shrink: 0;
    }        
    .swiper-slide-active {
       width: 40%;
    }
</style>

var swiper = new Swiper(".swiperEvent", {
    slidesPerView: "auto", 
    loop: true,
    centeredSlides: true, 
    spaceBetween: 30, // 可根据实际展示效果调整数值
    initialSlide: 1,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
    },
  });

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