如何使用transform: translate()实现图片滑块并限制图片仅在pics-div内显示

要实现你的需求，只需对现有代码做几项关键修改，就能让图片在指定容器内平滑滑动且不会超出显示范围：

核心修改要点 #

• 给#pics-div添加overflow: hidden，隐藏容器外的图片内容
• 给内部图片容器添加过渡属性，实现平滑滑动效果
• 通过JS监听按钮点击，动态修改transform: translateX()的值，同时限制滑动边界避免越界

完整代码 #

CSS代码 #

#pics-div {
  width: 700px;
  height: 400px;
  margin-top: 50px;
  overflow: hidden; /* 隐藏超出容器的内容 */
  position: relative;
}

.slider-container {
  display: flex;
  transition: transform 0.3s ease; /* 添加平滑过渡动画 */
}

#left-btn, #right-btn {
  width: 30px;
  height: 100px;
  margin-top: 190px;
  background-color: rgb(41, 32, 170);
  transition: 0.1s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#left-btn {
  margin-left: 40px;
}

#left-btn:hover, #right-btn:hover {
  box-shadow: 1px 1px 10px 1px rgb(41, 32, 170);
}

HTML代码 #

<h3>Image slider</h3>
<div style='display: flex;'>
  <div id='left-btn'>
    <p>L</p>
  </div>
  <div id='pics-div'>
    <div class="slider-container">
      <img src='https://shorturl.at/chBHM' alt='Red trees' height="400" width="700">
      <img src='https://shorturl.at/aAEX5' alt='Winter house' height="400" width="700">
      <!-- 可继续添加更多图片 -->
    </div>
  </div>
  <div id='right-btn'>
    <p>R</p>
  </div>
</div>

JavaScript代码 #

const sliderContainer = document.querySelector('.slider-container');
const leftBtn = document.getElementById('left-btn');
const rightBtn = document.getElementById('right-btn');
const slideWidth = 700; // 与单张图片、容器宽度保持一致
const totalSlides = sliderContainer.children.length;
let currentSlide = 0;

leftBtn.addEventListener('click', () => {
  if (currentSlide > 0) {
    currentSlide--;
    updateSliderPosition();
  }
});

rightBtn.addEventListener('click', () => {
  if (currentSlide < totalSlides - 1) {
    currentSlide++;
    updateSliderPosition();
  }
});

function updateSliderPosition() {
  sliderContainer.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
}

代码说明 #

1. overflow: hidden：让#pics-div仅展示自身范围内的内容，超出容器的图片部分会被自动隐藏
2. transition: transform 0.3s ease：给图片容器添加过渡效果，让滑动过程更流畅自然
3. JavaScript逻辑：通过currentSlide记录当前显示的图片索引，点击按钮时修改索引并计算translateX的偏移量，同时设置边界判断，防止滑到第一张图片左侧或最后一张图片右侧

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