Continuous Carousel Sliding Effect：点击按钮控制动态加载项反复左右滑动实现

核心修改逻辑：

• 新增全局变量存储当前偏移值，每次点击按钮时动态更新偏移量，而非写死固定位移值
• 新增CSS过渡属性实现平滑滑动效果，同时给轮播容器增加溢出隐藏规则
• 增加边界判断逻辑，避免轮播内容滑出可视范围

完整可运行代码 #

<!--Category Images-->  
<button class="btn" onclick="translateRight()">Prev</button>
<div id="itemImages" class="d-flex container-fluid CatImages" alt="store items">
  <!-- 动态加载的item项示例 -->
  <div class="item">商品1</div>
  <div class="item">商品2</div>
  <div class="item">商品3</div>
  <div class="item">商品4</div>
  <div class="item">商品5</div>
  <div class="item">商品6</div>
</div> 
<button class="btn" onclick="translateLeft()">Next</button>

<style>
.CatImages {
  overflow: hidden;
  white-space: nowrap;
  transition: transform 0.3s ease; /* 平滑滑动过渡 */
  width: 80%; /* 可视区域宽度可自定义 */
  display: inline-block;
}
.item {
  display: inline-flex;
  background-color: white;
  padding: 10px;
  margin: 0px 20px 0px 20px;
  text-align: center;
  min-width: 150px; /* 固定子项宽度方便计算偏移，可自定义 */
}
.btn {  
  height: 80px;
  width: 100px;
  background-color: white;
  z-index: 99;
  margin: 6% 0% 0% 0%;
  box-shadow: 6px 7px 10px 2px #efefef;
  text-align: center;
  vertical-align: top;
}
</style>

<script>
// 存储当前偏移量
let currentOffset = 0;
// 单步移动百分比，对应每次点击移动的距离
const stepOffset = 20;
// 最大偏移限制，可根据实际子项总宽度调整，避免滑空
const maxOffset = 0;
let minOffset = -80; // 按总共有5步可滑计算，可根据实际子项数量调整

function translateLeft(){
  // 向左滑动，偏移量减小
  currentOffset = Math.max(currentOffset - stepOffset, minOffset);
  document.getElementById("itemImages").style.transform = `translate(${currentOffset}%, 0%)`;
}

function translateRight(){
  // 向右滑动，偏移量增大
  currentOffset = Math.min(currentOffset + stepOffset, maxOffset);
  document.getElementById("itemImages").style.transform = `translate(${currentOffset}%, 0%)`;
}
</script>

动态加载适配说明 #

如果子项是动态加载的，可在子项渲染完成后，通过JS计算总可滑动距离更新minOffset的值：

// 子项渲染完成后执行
const container = document.getElementById('itemImages');
const totalWidth = container.scrollWidth;
const visibleWidth = container.clientWidth;
// 计算实际最小偏移百分比
minOffset = -((totalWidth - visibleWidth) / totalWidth) * 100;

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