Tenho a seguinte situação: um html e dentro desse html uma DIV, estou incluindo via js 3 imagens nessa div com innerHTML (como um Carrossel) que mudam de acordo com o botão e a posição deles no array, porém, a função executada no click para ao encontrar um objeto que carregue uma tag com imagem.
Onde no código está o objeto firstImage, se eu trocasse para "a", por exemplo, o código funcionaria normalmente, mas se coloco o objeto ele para ao exibi-lo.
Não sei o porquê disso ocorrer, alguém saberia me dizer? caso falte alguma informação é só dizer.
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>`;