Control deslizante CSS puro => Texto en lugar de punto de viñetas / Pase el cursor sobre el texto para cambiar la imagen

Intento hacer un control deslizante Pure CSS pero probé muchas opciones (visibility: hidden ;, z-index: 11,22,33 ..) pero no encontré la manera correcta de hacerlo funcionar.

Me gustaría mostrar una imagen predeterminada (diapositiva-0) hasta que el usuario pase el ratón sobre un enlace debajo del control deslizante. En esta captura de pantalla, no se ubica ningún enlace por lo que se muestra la imagen predeterminada: https://ibb.co/dX9YBm

Mi objective: 5 enlaces (botón-control deslizante) debajo de una imagen predeterminada. Cuando el usuario pasa el mouse sobre un enlace, la imagen cambia. Cada enlace muestra su propia imagen. Aquí se muestra una captura de pantalla con el botón-2: https://ibb.co/bBg8cR => se muestra la imagen (diapositiva 2). (no funciona en realidad …)

Cuando el usuario desaloje el enlace, la imagen predeterminada debe mostrarse nuevamente.

Aquí mi HTML para imágenes :

Homepage
Archi Déco
same html structure than "slide-1" for the 4 other images (with other images, and their own ID)

Aquí mi HTML para botones debajo de las imágenes del control deslizante:

 
same html than "button-1" structure for the 4 other buttons (with there own ID and title)

Para el CSS, como te dije, probé muchas opciones, pero nadie funciona bien, así que por eso no voy a compartirlo contigo porque es malo.

Me gustaría hacer algo como:

 #slide-1, #slide-2, #slide-3, #slide-4, #slide-5{ visibility: hidden; } #button-1 + #slide-1{ visibility: visible !important; } 

¿Puedes darme un consejo al respecto? Lo mejor de Regard,

Florian

Una solución de CSS pura se puede hacer fácilmente con flexbox. Simplemente configure el contenedor img como un hermano de los botones para que pueda acceder a él con el ~ combinador general de hermanos, luego use flex-basis:100% y flex-wrap:wrap el contenedor de modo que ocupe una fila completa y el orden negativo por lo que se pone visualmente sobre los botones.

 .flex-buttons{ width:100%; display:flex; flex-wrap:wrap; } .flex-buttons button{ flex:1; cursor:pointer; } .flex-buttons button:nth-child(1):hover ~ .imgs{ background:red; } .flex-buttons button:nth-child(2):hover ~ .imgs{ background:green; } .flex-buttons button:nth-child(3):hover ~ .imgs{ background:blue; } .flex-buttons button:nth-child(4):hover ~ .imgs{ background:purple; } .flex-buttons button:nth-child(5):hover ~ .imgs{ background:orange; } .imgs{ order:-1; flex-basis:100%; height:100px; border:2px solid grey; } 
 

Funciona perfectamente en la consola (sin el estilo de CSS personalizado en el que estoy trabajando), pero en mi sitio web no se muestran la 4ª y la 5ª diapositiva … ¡algo raro!

 .flex-buttons{ width:100%; display:flex; flex-wrap:wrap; background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/0-jacques-giral-photographie-accueil-paris.jpg'); height:450px; } .flex-buttons button{ flex:1; cursor:pointer; margin-top:2%; } .flex-buttons button:nth-child(1):hover ~ .imgs{ background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/1-archi-deco.jpg'); } .flex-buttons button:nth-child(2):hover ~ .imgs{ background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/2-bijoux-montre.jpg'); } .flex-buttons button:nth-child(3):hover ~ .imgs{ background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/3-cosmetique.jpg'); } .flex-buttons button:nth-child(4):hover ~ .imgs{ background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/4-edition.jpg'); } .flex-buttons button:nth-child(5):hover ~ .imgs{ background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/5-people.jpg'); } .imgs{ order:-1; flex-basis:100%; height:450px; background-size:cover; background-repeat: no-repeat; } 
  

Aquí hay un carrusel básico sin animaciones que funciona. Es esto lo que quieres ? Al pasar por encima de las viñetas, se muestran las imágenes?

 const bullets = [...document.getElementsByTagName('li')]; const images = [...document.getElementsByTagName('img')] for (let bullet of bullets) { bullet.addEventListener('mouseover', () => { let index = 0; let tmp = bullet; while( (tmp = tmp.previousElementSibling) != null ) { index++; } for (let i = 0; i < images.length; i++) { if(i === index) { images[i].style.zIndex = 1; } else { images[i].style.zIndex = 0; } } }); } 
 .carousel { width: 500px; height: 250px; border: 1px solid #ccc; overflow: hidden; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.75); border-radius: 5px; position: relative; } .carousel img { position: absolute; top: 0; left: 0; z-index: 0; } .carousel img:nth-child(1) { z-index: 1; } .carousel ul { position: absolute; z-index: 2; bottom: 0; left: 50%; transform: translateX(-50%); padding: 0; margin: 0; margin-bottom: 20px; cursor: default; } .carousel ul li { display: inline-block; list-style: none; }