如何在 Slider 中的 JavaScript 中更改文本和圖像？

Question

我在這里有這個代碼： https://codepen.io/double_milkshake/pen/VwZJjgq

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++;

    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--;

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

}

它是一個簡單的圖像 slider。 您看不到圖像，因為代碼是為本地驅動器上的圖像制作的。 每次單擊按鈕時，計數器都會發生變化，因此圖像也會發生變化。

現在我想在單擊時更改文本。 但不確定如何開始這個，也許你們有什么想法？

還有任何建議，當我不知道我的文件夾中有多少圖像時該怎么辦。 目前它們被硬編碼為 5。

非常感謝！

Answer 1

HTML 標記：

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

Javascript

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;
}