I am new to javascript and jquery. How can I make the main image change when clicking on the image below, and also change the title for each image?
Is it really necessary to use js or is there another way to do it?
.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>