soy nuevo en esto de la programación, pongo dos veces el mismo código , pero solo sale el primer slideshow el otro no sale. ¿como puedo hacer para que se muestren los dos, cada uno con un grupo de imágenes diferente. este es el código puesto.
Este sería el código que he puesto dos veces, pero solo se muestra un slideshow y quiero poner dos uno debajo del otro.
<style>
#slideshow {
position: relative;
}
#slideshow img {
width: 100%;
height: 100%;
position: relative;
transition: opacity 1s ease-in-out;
}
</style>
<div id="slideshow">
<a id="slideshow-link" target="_blank">
<img id="slideshow-image">
</a>
</div>
<script>
const images = [
{ src: '/publi/TVcehegin.png', link: 'https://tvcehegin.com' },
{ src: '/publi/banerpapasvidal.png', link: 'https://papasvidal.com' },
{ src: '/publi/TVcehegin.png', link: 'https://tvcehegin.com' },
{ src: '/publi/mstaralrm.png', link: 'https://movistarproseguralarmas.es' },
]
let currentIndex = 0;
function changeImage() {
const imgElement = document.getElementById('slideshow-image');
const linkElement = document.getElementById('slideshow-link');
imgElement.style.opacity = 0; // Desvanecer la imagen
setTimeout(() => {
imgElement.src = images[currentIndex].src;
linkElement.href = images[currentIndex].link;
imgElement.style.opacity = 1; // Mostrar la nueva imagen
}, 1000); // Esperar 1 segundo para el desvanecimiento
currentIndex = (currentIndex + 1) % images.length;
}
setInterval(changeImage, 4000);
changeImage(); // Iniciar el ciclo
</script>
```