How to iterate through an array on each click of an event listener?

Question

I'm new to JS and need help. I want to change an image and a paragraph dynamically with each click on an arrow. To do this, I have an array that contains the different values ​​that this image and this paragraph must take on each click.

Here is my table:

const slides = [
    {
        "image":"slide1.jpg",
        "tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
    },
    {
        "image":"slide2.jpg",
        "tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>"
    },
    {
        "image":"slide3.jpg",
        "tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>"
    },
    {
        "image":"slide4.png",
        "tagLine":"Autocollants <span>avec découpe laser sur mesure</span>"
    }
]

The idea is: I want to create a function to loop through my array on each click with a loop.
click 1 = object 1 of the array. click 2 = object 2 of the array. click 3 = object 3 of the array. click 4 = return to object 0.

    let slide = 0
    let currentSlide = slides[slide]
    console.log(currentSlide)
    // Function to advance in the table slides on click
    function loopTableSlides() {
    slides.forEach(function(slide, index) {
        if ((slides.length - 1) == slide) {
            slide = 0 // to return to the first object in the array
            } else {
                slide = index + 1 // to move on to the next item each turn
            } 
        console.log(currentSlide)
    })
    }

    const arrowRight = document.querySelector('.arrow_right')
    arrowRight.addEventListener('click', function(e) {
    e.stopPropagation()
    console.log('arrow right click')
    activeBullet()
    loopTableSlides()
    })

I then want to create another function with a setAttribute and an innerHTML which will be called in my event listener and which will fetch the values ​​of this famous loop.

Attached is the corresponding code with the first function I'm trying to check and the array in question. In the console, it returns 4 times the same object and always the same. Unfortunately I don't understand why...

Thanks for your help.

Answer 1

you can do something like this

const slides = [
    {
        "image":"slide1.jpg",
        "tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
    },
    {
        "image":"slide2.jpg",
        "tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>"
    },
    {
        "image":"slide3.jpg",
        "tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>"
    },
    {
        "image":"slide4.png",
        "tagLine":"Autocollants <span>avec découpe laser sur mesure</span>"
    }
]

const slide = document.getElementById('slide')
const prev = document.getElementById('prev')
const next = document.getElementById('next')

let index = 0

const showSlide = n => {
  slide.innerHTML = slides[n].image
}
showSlide(index)
next.addEventListener('click', () => {
  index = (index + 1) % slides.length 
  showSlide(index)
})

prev.addEventListener('click', () => {
  index = (index +  slides.length - 1) % slides.length 
  showSlide(index)
})

<div id="slide"></div>
<button id="prev" >prev</button>
<button id="next" >next</button>