嘿，我来帮你搞定这个Swiper.js的卡片轮播需求！你想要的一行显示5张卡片、中心卡片高亮激活、左右各放两张非激活卡片的布局，用Swiper其实非常好实现，我一步步给你拆解：

第一步：基础结构与核心配置 #

首先，你得先搭好HTML结构，然后通过Swiper的配置项实现核心布局逻辑：

HTML 结构

<div class="swiper my-swiper">
  <div class="swiper-wrapper">
    <!-- 这里放你的N个卡片slide，示例先写6个 -->
    <div class="swiper-slide">
      <div class="card">卡片1</div>
    </div>
    <div class="swiper-slide">
      <div class="card">卡片2</div>
    </div>
    <div class="swiper-slide">
      <div class="card">卡片3</div>
    </div>
    <div class="swiper-slide">
      <div class="card">卡片4</div>
    </div>
    <div class="swiper-slide">
      <div class="card">卡片5</div>
    </div>
    <div class="swiper-slide">
      <div class="card">卡片6</div>
    </div>
  </div>
  <!-- 可选：添加分页或导航按钮 -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

JavaScript 配置

const swiper = new Swiper('.my-swiper', {
  // 核心：一次显示5个slide
  slidesPerView: 5,
  // 让中心的slide始终居中显示
  centeredSlides: true,
  // 控制slide之间的间距，按需调整
  spaceBetween: 20,
  // 可选：开启循环滚动，体验更流畅
  loop: true,
  // 可选：添加分页指示器
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  // 可选：添加前后导航按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

第二步：添加样式实现“中心突出+左右缩小”效果 #

光有布局还不够，咱们得通过CSS让激活的中心卡片更显眼，左右的卡片缩小弱化：

/* 基础卡片样式，按需调整 */
.card {
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}

/* 所有非激活slide的基础样式 */
.swiper-slide {
  transform: scale(0.8);
  opacity: 0.7;
  transition: all 0.3s ease;
}

/* 激活的中心slide恢复正常尺寸和透明度 */
.swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}

/* 可选：给激活slide的左右紧邻slide设置过渡样式，比最外侧的稍大一点 */
.swiper-slide-prev,
.swiper-slide-next {
  transform: scale(0.9);
  opacity: 0.85;
}

关键逻辑解释 #

• slidesPerView: 5：直接控制一次在视口中显示5个slide，刚好符合你要的“5张一行”需求
• centeredSlides: true：这是实现“中心slide始终激活”的核心，它会让当前激活的slide自动居中，左右各分布两个slide
• CSS的transform和opacity过渡：通过给不同状态的slide设置缩放和透明度，直观区分激活与非激活状态，视觉层次更清晰

你只需要把上面的代码根据自己的卡片内容调整样式细节，就能快速实现你想要的效果啦！

备注：内容来源于stack exchange，提问作者Mikhail qbr