如何使用JavaScript和用户生成的图像制作图像滑块？

我正在从事一个项目，该项目：

要求用户从其设备中选择图像

选定的图像将显示在图像滑块中

const slider=document.querySelector（'.slider'）；
//加载用户选择的文件
fileInp.addEventListener（'input'，（e）=>
{
const files=e.target.files；
for（让文件中的文件）{
const img=新图像（）；
const reader=new FileReader（）；
reader.addEventListener（'load'，（e）=>
{
img.src=e.target.result；
滑块。附加子对象（img）；
img.classList.add（'slide'）；
})
reader.readAsDataURL（文件）；
} 
})
//滑块
const slides=document.querySelectorAll（'.slide'）；
设计数器=0；
slides.forEach（（幻灯片，索引）=>
{
slide.style.left=
`${index*100}%`
})
nextBtn.onclick=（）=>{
计数器++；
move（）；
}
prevBtn.onclick=（）=>{
计数器--；
move（）；
}
函数move（）{
if（计数器{
slide.style.transform=
`translateX（-${counter*100}%）`
})
}

@导入url（“https://fonts.googleapis.com/css2?family=Nunito:wght@400;900");
* {
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Nunito”，无衬线；
}
身体{
显示：网格；
放置项目：中心；
高度：100vh；
}
.盒子{
显示器：flex；
弯曲方向：立柱；
填充：1rem；
差距：1勒姆；
}
.滑块{
最小宽度：300px；
最小高度：70px；
显示器：flex；
溢出：隐藏；
位置：相对位置；
}
.幻灯片{
位置：绝对位置；
身高：100%；
宽度：100%；
对象匹配：覆盖；
对象位置：中心；
转换：转换250ms轻松；
}
h1{
边缘底部：0.25雷姆；
}
.控制{
显示器：flex；
间隙：0.5雷姆；
宽度：100%；
对齐项目：居中；
}
.btn{
背景色：#333；
边界：0；
填充：0.5rem 0.75em；
宽度：12厘米；
文本转换：大写；
字母间距：1px；
颜色：#fff；
}
博士{
背景色：#08b；
宽度：最大含量；
}
.btn:悬停{
边框：2倍实心#000；
边界半径：.25rem；
}

画廊
以前的
选择文件
下一个

这是因为在页面加载时

const slides=document.querySelectorAll（'.slide'）为空，将其移动到文件
load
event


const slider=document.querySelector（'.slider'）；
让幻灯片=[]；
//加载用户选择的文件
fileInp.addEventListener（'input'，（e）=>{
const files=e.target.files；
for（让文件中的文件）{
const img=新图像（）；
const reader=new FileReader（）；
reader.addEventListener（'load'，（e）=>{
img.src=e.target.result；
滑块。附加子对象（img）；
img.classList.add（'slide'）；
slides=document.queryselectoral（'.slide'）；
slides.forEach（（幻灯片，索引）=>{
幻灯片。样式。左侧=
`${index*100}%`
})
})
reader.readAsDataURL（文件）；
}
})
//滑块
设计数器=0；
nextBtn.onclick=（）=>{
计数器++；
move（）；
}
prevBtn.onclick=（）=>{
计数器--；
move（）；
}
函数move（）{
if（计数器{
slide.style.transform=
`translateX（-${counter*100}%）`
})
}
。幻灯片{
位置：绝对位置；
身高：100%；
宽度：100%；
顶部：110px；
对象匹配：覆盖；
对象位置：中心；
转换：转换250ms轻松；
}
h1{
边缘底部：0.25雷姆；
}
.控制{
显示器：flex；
间隙：0.5雷姆；
宽度：100%；
对齐项目：居中；
}
.btn{
背景色：#333；
边界：0；
填充：0.5rem 0.75em；
宽度：12厘米；
文本转换：大写；
字母间距：1px；
颜色：#fff；
}
博士{
背景色：#08b；
宽度：最大含量；
}
.btn:悬停{
背景色：#222；
}

画廊
以前的
选择文件
下一个