修复CSS实现的Testimonial slider切换按钮被截断问题

问题描述 #

我实现了一个基于CSS的Testimonial滑块，目前遇到的问题是切换按钮（前后箭头）被容器边缘截断，无法完整显示。尝试修改#box的width属性没有效果，推测问题出在#box的相关设置上，求修复方法。

• 当前效果：左右切换按钮的一半被容器边缘遮挡，无法完整展示
• 预期效果：按钮完整显示在容器外侧，不被截断

实现代码 #

HTML代码 #

<div id="box">
      <div class="wrapper">
        <div class="testimonial-container" id="testimonial-container">
          <div id="testimonial1" class="active">
            <img src="" />
          </div>
        </div>
        <button id="prev" onclick="prev()">&lt;&lt;/button>
        <button id="next" onclick="next()">&gt;</button>
      </div>
    </div>

CSS代码 #

#box {
  position: relative;

    width: auto;
  left: auto;
  margin: auto;
    max-width: 70em;
    min-height: 26em;
  max-height: 70em;

}
.img-con {
    position: absolute;
}
.img-con img {
    height: 1px;
    width: 1px;
}

.testimonial-container {

  margin-top: 1%;
    width: 85%;
    height: 100%;
    position: relative;
    margin: auto;
    padding: 1.8em 1.2em;

}
.testimonial-container p {
    color: #8c8c90;
    text-align: center;
    font-size: 0.9em;
    line-height: 2em;
    letter-spacing: 0.05em;
}
.testimonial-container img {
    display: block;
    margin: 1.8em auto 1.25em auto;
    border-radius: 50%;
    width: 4.4em;
}
.testimonial-container h3 {
    color: #2d3d67;
    font-size: 1em;
    text-align: center;
}
.testimonial-container h6 {
    color: #bcc4da;
    font-size: 0.9em;
    letter-spacing: 0.03em;
    font-weight: 400;
    text-align: center;
}
.wrapper button {
    font-size: 1.8em;
    color: #0a69ed;
    height: 2.2em;
    width: 2.2em;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    border: none;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
button#next {
    right: -1.1em;
}
button#prev {
    left: -1.1em;
}

@media screen and (max-width: 650px) {
    .wrapper {
        font-size: 14px;
    }
}

JavaScript代码 #

window.addEventListener("load", function() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("box").style.display = "block";
});
const testimonials = [
  {
    name: "example",
    job: "example",
    image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
    testimonial:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
  },
  {
    name: "example",
    job: "example",
    image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
    testimonial:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
  },
  {
    name: "example",
    job: "example",
    image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
    testimonial:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
  }
];
let f = 0; // current slide
let j = testimonials.length; // total slides
let testimonialContainer = document.getElementById("testimonial-container");
function next() {
  f = (j + f + 1) % j;
  displayTestimonial();
}

function prev() {
  f = (j + f - 1) % j;
  displayTestimonial();
}
let displayTestimonial = () => {
  testimonialContainer.innerHTML = `
        <p>${testimonials[f].testimonial}</p>
         <img src=${testimonials[f].image}></img>
        <h3>${testimonials[f].name}</h3>
        <h6>${testimonials[f].job}</h6>
        `;
};
window.onload = displayTestimonial;

修复方案 #

问题根源在于两个核心点：.wrapper缺少position: relative导致按钮定位参考错误，#box没有给外侧按钮预留显示空间。修改步骤如下：

1. 修正按钮定位参考容器 #

给.wrapper添加position: relative，确保按钮的绝对定位以.wrapper为基准：

.wrapper {
  position: relative;
}

2. 给#box添加内边距预留按钮空间 #

修改#box的样式，替换width: auto为width: 100%，添加左右内边距并启用box-sizing: border-box避免容器宽度溢出：

#box {
  position: relative;
  width: 100%;
  margin: auto;
  max-width: 70em;
  min-height: 26em;
  max-height: 70em;
  padding: 0 3em; /* 给左右按钮预留显示空间 */
  box-sizing: border-box; /* 内边距不增加容器总宽度 */
}

3. 调整按钮位置（可选优化） #

将按钮的left/right值改为0，让按钮刚好贴在#box的内边缘，匹配预期效果：

button#next {
  right: 0;
}
button#prev {
  left: 0;
}

修复原理 #

• .wrapper设置position: relative后，按钮的绝对定位会相对于这个容器计算，避免定位参考对象错误导致的位置偏移。
• #box的左右内边距给外侧按钮留出了显示空间，box-sizing: border-box保证容器总宽度不会超过max-width限制。
• 调整按钮的位置值后，按钮会完美显示在容器外侧，不会被截断。

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