0
I have the following situation: an html and inside that html a DIV, I am including via js 3 images in this div with innerHTML (like a Carousel) that change according to the button and their position in the array, however, the function executed in the click to when finding an object that loads an image tag.
Where in the code is the object firstImage, if I switched to "to", for example, the code would work normally, but if I put the object it stops when displaying it.
I do not know why this occurs, would someone tell me? in case some information is missing just say.
const Slider = () => {
const slider = document.querySelector ('[data-slider__conteudo]');
const botaoEsquerdo = document.querySelector ('[data-botao__esquerdo]')
const botaoDireito = document.querySelector ('[data-botao__direito]')
const lista = [ firstImage, `b`, `c`];
slider.innerHTML = lista[1];
botaoEsquerdo.addEventListener ('click', tarefaBotaoEsquerdo);
function tarefaBotaoEsquerdo () {
if (slider.innerHTML == lista [0]) {
lista.map ((item) => {
slider.innerHTML = lista[2];
});
} else if (slider.innerHTML == lista [2]) {
lista.map ((item) => {
slider.innerHTML = lista[1];
});
} else {
lista.map ((item) => {
slider.innerHTML = lista[0];
});
}
}
}
const firstImage = `<a href="/">
<img src="./assets/IMG/img1.png" alt="" class="image1 slider__image" >
</a>`;
Don’t say hello or thank you in publications.
– Augusto Vasques