How to make text and image change in JavaScript within a Slider?

Question

I've have this code here: 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)`

}

It is a simple image slider. You can't see the images, because the code is made for images that are on your local drive. Every time you click the button, the counter changes and this way the image changes.

Now I would like to change the text, when clicking as well. But not sure How to start this, maybe you guys have any ideas?

Also any suggestions, what to do when I don't know How many images are in my folder. Currently they are hard coded to 5.

Thanks a lot!

Answer 1

HTML Markup:

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