Tengo un carrusel de imagenes que solo consta de una imagen declarada en el html, pero en el archivo JS le digo que el src cambie dependiendo de que boton se use.
Además quiero que por imagen se muestre un div (cada imagen tendra un div) dependiendo de que imagen este "seleccionada" en el src.
Este es el HTML:
var imagenes = ['images/ju_tboi.jpg','images/ju_mario.jpg','images/ju_cuphead.jpg','images/ju_minecraft.jpg','images/ju_goi.jpg','images/ju_mtg.jpg','images/ju_baldi.jpg','images/ju_doom.jpg'],
cont=0;
function carrousel(contenedor){
contenedor.addEventListener('click', e =>{
let atras = contenedor.querySelector('.atras'),
adelante = contenedor.querySelector('.adelante'),
img = contenedor.querySelector('img'),
t1 = contenedor.querySelector('#txt1'),
tgt = e.target;
if(tgt == atras){
if(cont > 0){
img.src=imagenes[cont - 1];
cont--;
}else{
img.src = imagenes[imagenes.length - 1];
cont= imagenes.length - 1;
}
}else if(tgt == adelante){
if(cont < imagenes.length - 1){
img.src=imagenes[cont + 1];
cont++;
}else{
img.src = imagenes[0];
cont= 0;
}
}
if(img.src=='images/ju_tboi.jpg'){
t1.visibility=visible;
}
<body>
<div class="contenedor">
<div class="atras botones">
<
</div>
<div class="adelante botones">
>
</div>
<img src="images/ju_tboi.jpg" alt="" class="imagen">
</div>
<div class="info" id="txt1"><p>The Binding of Isaac.</p>
</div>
Ya probe varios metodos pero ninguno funciona, ayuda por favor.