así que estaba creando un control deslizante de categoría, pero soy nuevo en js y jquery. Lo intenté todo pero no pude agregar un evento de clic a la imagen para reemplazar el contenido div cuando se hizo clic. Adjunté las imágenes de pasos a continuación.

control deslizante inicial del paso 1 [1]: https://i.stack.imgur.com/LLifb.png

paso 2 si hago clic en cualquiera de los mosaicos, su hijo será visible [2]: https://i.stack.imgur.com/pZkcD.png

¿Alguien puede ayudar a crear código html css js para esto?

 <div class="banner-slider"> <div class="slider slider-nav "> <div class="thumbnail-image"> <div class="thumbImg"> <img src="img/Icons/shower.svg" alt="slider-img"> </div> <span>SHOWER</span> </div> <div class="thumbnail-image"> <div class="thumbImg"> <img src="img/Icons/commode.svg" alt="slider-img"> </div> <span>COMMODE</span> </div> <div class="thumbnail-image"> <div class="thumbImg"> <img src="img/Icons/water-faucet.svg" alt="slider-img"> </div> <span>WATER FAUCET</span> </div> <div class="thumbnail-image"> <div class="thumbImg"> <img src="img/Icons/wash-basin.svg" alt="slider-img"> </div> <span>WASH BASIN</span> </div> <div class="thumbnail-image"> <div class="thumbImg"> <img src="img/Icons/water-faucet.svg" alt="slider-img"> </div> <span>WWATER FAUCET</span> </div> </div> </div>

// parte js no puede hacer