我完全懂你遇到的糟心情况——本来想做个每次滑1张的轮播，结果一按按钮直接滑到末尾，试了各种方案都不管用，还想适配不同屏幕尺寸切换不同数量的项对吧？下面我一步步帮你排查和解决：

一、先搞懂一次性滑到底的核心原因 #

这种情况大概率和滑动距离计算错误或者响应式宽度适配失效有关，和屏幕尺寸确实脱不了干系：

• 没正确获取轮播项的实际宽度（比如忽略了padding、border，导致计算出来的滑动距离不对）
• 动画目标值误用了容器总宽度，而不是单张/指定数量项的宽度
• 屏幕尺寸变化时，没重新计算滑动距离，导致适配失效

二、先搞定「固定每次切换1张」的基础功能 #

先把基础功能跑通，再考虑响应式切换数量的需求，分两种场景给你代码示例：

1. 原生CSS+JS实现（适合轻量场景） #

先搭好HTML结构：

<div class="carousel-container">
  <div class="carousel-track">
    <div class="carousel-item">轮播项1</div>
    <div class="carousel-item">轮播项2</div>
    <div class="carousel-item">轮播项3</div>
    <div class="carousel-item">轮播项4</div>
    <div class="carousel-item">轮播项5</div>
  </div>
  <button class="carousel-btn prev">←</button>
  <button class="carousel-btn next">→</button>
</div>

CSS要注意容器隐藏溢出、轨道用flex不换行，还要把项的宽度设对：

.carousel-container {
  overflow: hidden;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out; /* 平滑过渡动画 */
}
.carousel-item {
  flex: 0 0 auto; /* 禁止项被压缩/拉伸 */
  width: 100%; /* 默认移动端1张 */
  padding: 1rem;
  box-sizing: border-box; /* 让padding算入宽度，避免计算偏差 */
}

/* 响应式适配：平板显示3张，桌面显示4张 */
@media (min-width: 768px) {
  .carousel-item {
    width: 33.333%;
  }
}
@media (min-width: 1200px) {
  .carousel-item {
    width: 25%;
  }
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }

关键的JS逻辑，要动态计算滑动距离，还要处理边界防止滑出：

document.addEventListener('DOMContentLoaded', () => {
  const track = document.querySelector('.carousel-track');
  const items = document.querySelectorAll('.carousel-item');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');

  let currentIndex = 0;
  let itemWidth = items[0].offsetWidth; // 获取单个项的实际宽度

  // 滑动核心函数
  function slideTo(targetIndex) {
    // 限制索引范围，避免滑出轮播项
    const maxIndex = items.length - Math.floor(track.offsetWidth / itemWidth);
    targetIndex = Math.max(0, Math.min(targetIndex, maxIndex));
    currentIndex = targetIndex;
    track.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
  }

  // 绑定按钮事件
  prevBtn.addEventListener('click', () => slideTo(currentIndex - 1));
  nextBtn.addEventListener('click', () => slideTo(currentIndex + 1));

  // 窗口 resize 时重新计算宽度，防止响应式下错位
  window.addEventListener('resize', () => {
    const newItemWidth = items[0].offsetWidth;
    // 重新计算当前索引，避免跳变
    currentIndex = Math.round(Math.abs(parseFloat(track.style.transform.replace('translateX(', ''))) / newItemWidth);
    itemWidth = newItemWidth;
    slideTo(currentIndex);
  });
});

2. 用第三方库（比如Swiper）快速实现 #

如果是用Swiper这类成熟库，一次性滑到底通常是配置错了，比如slidesPerGroup没设对。给你个适配不同屏幕的配置示例：

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1, // 默认移动端显示1张
  slidesPerGroup: 1, // 每次切换1张（固定切换1张的核心配置）
  spaceBetween: 20,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // 响应式适配不同屏幕的显示数量
  breakpoints: {
    768: {
      slidesPerView: 3, // 平板显示3张，但还是每次切换1张
    },
    1200: {
      slidesPerView: 4, // 桌面显示4张，每次切换1张
    }
  }
});

如果想让平板/桌面每次切换对应数量的项，把slidesPerGroup改成和slidesPerView一样的值就行，比如平板设slidesPerGroup:3，就会每次滑3张。

三、常见坑点排查 #

• 一定要给carousel-item加box-sizing: border-box，不然padding会让实际宽度超出设置值，导致滑动计算错误
• 如果用JS获取宽度，要在DOM加载完成后再执行（比如上面的DOMContentLoaded事件）
• 要是项之间有margin，计算宽度时要把margin也算进去，或者用items[0].getBoundingClientRect().width获取更精准的宽度

你可以先试试上面的方案，要是还有问题，把你现有的代码贴出来，我再帮你针对性调~

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