如何在一个滑块内用JavaScript更改文本和图像？

我这里有一个代码：

它是一个简单的图像滑块。您无法看到图像，因为代码是为本地驱动器上的图像编写的。每次你点击按钮，计数器就会改变，这样图像也会改变

现在我想在单击时更改文本。但不知道怎么开始，也许你们有什么想法

还有任何建议，当我不知道文件夹中有多少图像时该怎么办。目前，它们被硬编码为5

非常感谢

HTML标记：

<div class="text" id="caption">
  This is image 1
</div>

---

你试过什么？您可以使用innerText属性在文本字段中设置值是的，我已经尝试过这样做，但innerHTML的问题是，当我将其包含在函数中时，它只会更改下一个图像的文本。但我希望每一张图片都有另一个标题。

<div class="text" id="caption">
  This is image 1
</div>

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

const textElement = document.querySelector(".text");


let counter = 0;

nextBtn.addEventListener('click',nextSlide);
prevBtn.addEventListener('click',prevSlide);

function nextSlide() { 

    container.animate([{opacity: '0.1'},{opacity: '1.0'}],{duration:500, fill: 'forwards'}); 

    if(counter==4)
        counter=-1;
    counter = setText(counter, "up");

    container.style.backgroundImage = `url(img/bcg-${counter}.png)`
}


function prevSlide() {

    container.animate([{opacity: '0.1'},{opacity: '1.0'}],{duration:1000, fill: 'forwards'});

    if(counter==-0)
        counter=5;
    counter = setText(counter, "down"); 

    container.style.backgroundImage = `url(img/bcg-${counter}.png)`
}

function setText(cntr, direction){

    if(direction=="up") {
        cntr++;     
    } else {
        cntr--;     
    }
    if(cntr==0){
        document.getElementById("caption").innerHTML = "This is image 1";
    } else if(cntr==1){
        document.getElementById("caption").innerHTML = "This is image 2";
    } else if(cntr==2){
        document.getElementById("caption").innerHTML = "This is image 3";
    } else if(cntr==3){
        document.getElementById("caption").innerHTML = "This is image 4";
    } else if(cntr==4){
        document.getElementById("caption").innerHTML = "This is image 5";
    } 

    return cntr;
}