Owl Carousel卡片无法居中与标题对齐问题求助

问题 #

网站落地页用Owl Carousel展示客户评价，轮播组件略微偏右，无法和上方的评价标题对齐，试过调整轮播宽度、检查HTML错误、重写JS代码都没解决。

问题排查 #

1. 配置项错误：JS配置里写的item: 3是错误的，Owl Carousel的正确参数是复数形式items，这个错误会直接导致轮播布局计算异常，是偏移的核心原因之一。
2. 轮播容器无居中基准：Owl Carousel生成的容器没有设置明确的居中样式，容易继承父元素的边距或偏移属性。
3. 卡片样式冲突：固定宽度的卡片加上缩放变换，和center: true的布局逻辑叠加后，会干扰轮播的居中计算。

解决方法 #

1. 修正JS配置参数 #

把item: 3改成items: 3，同时添加margin参数控制卡片间距，避免布局挤压。

2. 给轮播容器加居中样式 #

设置轮播容器的宽度范围并添加margin-inline: auto，确保和标题的对齐基准一致。

3. 微调卡片样式 #

给卡片加上box-sizing: border-box，避免内边距撑宽卡片干扰布局。

修改后的完整代码 #

CSS 样式 #

/* 轮播容器居中对齐 */
.owl-testimonials {
  width: 90%;
  margin-inline: auto;
}

.owl-item.center .testimonial-card {
  transform: scale(0.8);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
}

.testimonial-card {
  width: 500px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  border-radius: 20px;
  background: white;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
  text-align: center;
  align-content: space-evenly;
  justify-content: center;
  transform: scale(0.5);
  transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
  box-sizing: border-box; /* 确保内边距不撑宽卡片 */
}

.testimonial-content {
  display: flex;
  flex-direction: column;
}

.testi-img {
  width: 100%;
  height: 100%;
  position: relative;
}

.testi-title {
  background-color: #FFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 1);
  text-align: center;
  border-radius: 40px;
  margin-top: 30px;
  padding: 30px;
  width: 40%;
  margin-inline: auto;
  font-weight: bold;
}

JS 配置 #

$(".owl-testimonials").owlCarousel({
  loop: true,
  items: 3, // 修正为复数形式items
  startPosition: 1,
  center: true,
  autoplay: false,
  autoplayTimeout: 3000,
  autoplayHoverPause: true,
  margin: 20, // 添加卡片间距，避免布局拥挤
  // 可选：添加响应式配置，适配不同屏幕
  responsive: {
    0: {
      items: 1
    },
    768: {
      items: 3
    }
  }
});

HTML 结构（无需修改） #

<div class="testi-title"> Testimonial</div>
<section class="owl-carousel owl-testimonials">
    <div class="testimonial-card">
        <img class="testi-img" src="images/team/team2.jpg" alt="Testimonial 1">
        <div class="testimonial-content">
            <span class="date">1 days ago</span>
            <h4>Testimonial One</h4>
            <p>
                Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
            </p>
        </div>
    </div>

    <div class="testimonial-card">
        <img class="testi-img" src="images/team/team1.jpg" alt="Testimonial 2">
        <div class="testimonial-content">
            <span class="date">1 days ago</span>
            <h4>Testimonial One</h4>
            <p>
                Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
            </p>
        </div>
    </div>
    <div class="testimonial-card">
        <img class="testi-img" src="images/team/team3.jpg" alt="Testimonial 3">
        <div class="testimonial-content">
            <span class="date">1 days ago</span>
            <h4>Testimonial One</h4>
            <p>
                Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
            </p>
        </div>
    </div>
</section>

原偏移效果 #

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