如何实现同一行三个div的平滑滑动轮播，支持左右按钮控制

实现思路 #

• 用外层容器控制可视区域，隐藏超出部分
• 内层滑动轨道承载所有div，通过修改transform属性实现位移，配合CSStransition属性实现平滑过渡
• 用索引变量记录当前滑动位置，点击按钮时更新索引，到达边界值时自动重置实现循环效果

1. 基础HTML结构 #

<!-- 轮播外层容器 -->
<div class="carousel-wrap">
  <!-- 滑动轨道 -->
  <div class="slide-track">
    <div class="slide-item">内容1</div>
    <div class="slide-item">内容2</div>
    <div class="slide-item">内容3</div>
  </div>
  <!-- 控制按钮 -->
  <button id="left">左滑</button>
  <button id="right">右滑</button>
</div>

2. 核心CSS样式 #

.carousel-wrap {
  /* 单格宽300px的话，三个总宽度为900px，可按需调整 */
  width: 900px;
  overflow: hidden;
  position: relative;
}
.slide-track {
  display: flex;
  /* 平滑过渡效果，时长可自行调整 */
  transition: transform 0.4s ease;
}
.slide-item {
  width: 300px;
  height: 200px;
  flex-shrink: 0;
}
/* 按钮固定在轮播两侧 */
#left, #right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
#left { left: 10px; }
#right { right: 10px; }

3. 交互逻辑JS代码 #

const track = document.querySelector('.slide-track');
const items = document.querySelectorAll('.slide-item');
const leftBtn = document.querySelector('#left');
const rightBtn = document.querySelector('#right');

// 单个滑动项宽度
const itemWidth = items[0].offsetWidth;
// 当前滑动索引，初始为0
let currentIndex = 0;
// 总滑动项数
const totalItems = items.length;

// 右滑事件
rightBtn.addEventListener('click', () => {
  currentIndex++;
  // 滑到最后一项后重置到第一项
  if (currentIndex >= totalItems) {
    currentIndex = 0;
  }
  updateSlide();
});

// 左滑事件
leftBtn.addEventListener('click', () => {
  currentIndex--;
  // 滑到第一项之前重置到最后一项
  if (currentIndex < 0) {
    currentIndex = totalItems - 1;
  }
  updateSlide();
});

// 更新滑动位置
function updateSlide() {
  track.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
}

如果需要实现完全无缝的滑动效果，避免从最后一项跳回第一项的突兀感，可以把前两项滑动项复制追加到轨道末尾，滑动到复制项时瞬间切回对应真实项的位置即可。

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