香草JavaScript旋转木马translateX问题

我正在做这个香草JS旋转木马，但是translateX有一个问题。在较小的屏幕尺寸上，它在到达末尾时不会显示旋转木马中的所有项目，而在较大的屏幕尺寸上，它会在旋转木马中最后一个项目后留下空白。可能是它如何计算translateX值的问题。传送带一次应滑动3个项目，并且还包含10个项目

const carouselInteraction=（carousel）=>{
//主选择器
//##############
如果（！转盘）返回；
let elementsList=carousel.children[0]。查询选择器（“.innerList”）；
const elements=elementsList.querySelectorAll（“.innerList\uuu item”）；
const navigation=document.queryselectoral(
`[数据导航类型='${carousel.getAttribute（“数据carousel类型”）}']`
)[0];
//滑块参数
//##############
设carouselListSteps=0；
设旋转木马计数=0；
const carouselAmountVisible=5；
const itemsToTransition=3；
常量元素宽度=345；
常数总数=10；
//导航按钮
//##############
const transitionPrev=navigation.firstElementChild；
const transitionNext=navigation.lastElementChild；
//迭代所有滑块元素
//##############
[]forEach.call（元素，（元素）=>{
element.style.width=`${elementWidth}px`；
carouselAmount++；
});
elementsList.style.width=elementWidth*total+（24*total-1）+“px”；
//24是元素的边距
transitionNext.onclick=（）=>{
if（旋转木马步骤<旋转木马计数-旋转木马计数可见）{
carouselListSteps+=itemsToTransition；
moveCarouselList（）；
}
};
transitionPrev.onclick=（）=>{
如果（旋转木马步骤>0）{
carouselListSteps-=itemsToTransition；
moveCarouselList（）；
}
};
const moveCarouselList=（）=>{
elementsList.style.transform=`translateX（${-elementWidth*carouselListSteps}px）`；
};
};
.carouselWrapper{
左侧填充：20px；
}
.旋转木马-列表{
身高：445px；
保证金：自动；
溢出：隐藏；
位置：相对位置；
}
.内部列表{
位置：绝对位置；
保证金：0；
填充：0；
过渡：所有0.9都易于输入输出；
转换：translateX（0px）；
列表样式：无；
身高：445px；
}
.innerList\u项目{
宽度：344px；
身高：445px；
显示：内联块；
}
.innerList\u项：非（：第一个子项）{
左边距：24px；
}
.元素{
显示：表格；
身高：100%；
宽度：100%；
背景色：#f7f7f7；
箱形阴影：2px2px2pxDarkgrey；
}
.单元跨度{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
颜色：白色；
字体大小：50px；
}

以前的
下一个


1.


2.


3.


4.


5.


6.


7.


8.


9


10


示例代码似乎不起作用……这是否回答了您的问题？