Soy nuevo en javascript y jquery. ¿Cómo puedo hacer que la imagen principal cambie al hacer clic en la imagen de abajo y también cambiar el título de cada imagen?
¿Es realmente necesario usar js o hay otra forma de hacerlo?
.custom-slider { text-align: center; } .main-image > img { margin-top: 5px; width: 50px; border-radius: 100px; box-shadow: 0 0 0 3px pink, 0 0 13px #333; } .img-to-select > .img-to-select__item > img { width: 30px; border-radius: 100px; height: 100%; } .img-to-select { overflow: hidden; display: flex; justify-content: space-around; } .img-to-select > .img-to-select__item { display: flex; justify-content: space-around; } <div class="custom-slider-section"> <div class="custom-container"> <div class="custom-slider"> <div class="custom-slider__title"> <span>Title </span> </div> <div class="main-image"> <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ"> </div> <div class="img-to-select"> <div class="img-to-select__item selected"> <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/732/200/300.jpg?hmac=mBueuWVJ8LlL-R7Yt9w1ONAFVayQPH5DzVSO-lPyI9w"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/230/200/300.jpg?hmac=pyhlpgJN2oBeEzhJbnJYrCsLoJM6MKd_NUQGIQhVx5k"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/377/200/300.jpg?hmac=veEWg3ApI7rkKqMF6MuaWBmxPgnEe-Ar9eDdMG3q-kk"> </div> </div> </div> </div> </div>