Next.js实现Testimonial外侧卡片平滑部分隐藏效果方案咨询

安全阿岳

2026-7-6

实现客户评价卡片外侧部分隐藏效果

问题背景

使用Next.js构建客户评价模块，其余功能已完成，需要实现外侧卡片部分隐藏的效果，现有代码未达成目标。

解决方案

通过调整容器的边距与溢出设置即可实现该效果，核心思路是让首尾卡片超出外层可视区域，再通过overflow-hidden裁切超出部分：

给原有flex容器套一个父容器，设置overflow-hidden来裁切超出内容
调整flex容器的左右负边距，让首尾卡片向外延伸
给flex容器添加对应值的左右内边距，保证中间卡片的布局不受影响

修改后的完整代码如下：

<div className="overflow-hidden max-w-6xl w-full">
  <div className='flex flex-row justify-start gap-x-[20px] overflow-x-auto no-scrollbar pointer-events-none w-full ml-[-20px] mr-[-20px] pl-[20px] pr-[20px]' ref={containerRef}>
    {testimonialData.map((testimonial, index) => (
      <div className={`relative flex flex-col max-w-[32%] min-w-[32%]`} id={`testimonial-${index}`}>
        <div className='testimonials-bg h-[220px] absolute top-0 w-full'></div>
        <div key={index} className="p-[20px] testimonials-border h-[220px] relative">
          <p className="text-white text-sm mb-[20px]">{testimonial.message}</p>
          <div className='absolute bottom-[20px] left-[20px] flex flex-row justify-start gap-x-[10px] items-center'>
            <div className='flex w-[48px] h-[48px] rounded-full justify-center items-center bg-[#D26783] text-white'>
              {testimonial.iconText}
            </div>
            <p className="text-white text-sm font-medium">{testimonial.customerName}</p>
          </div>
        </div>
      </div>
    ))}
  </div>
</div>