Добрый день !
Пытаюсь написать слайдер или аккордеон.
Как мне сделать так, чтобы при клике на мини-изображение_1 открывал большое-изображение_1.
При клике на мини-изображение_2, скрывал большое изображение_1, открывал большое-изображение2.
Есть код.
1. Блок с мини-изображениями .shop-item-ph.
2. Блок с Большим-изображением .col-7 mx-auto mb-3
<div class="shop-item-ph">
<div class="mb-3">
<a class="items-ph" href=""><img class="itemimage img-fluid" src="img/item2.webp" alt=""></a>
</div>
<div class="mb-3">
<a class="items-ph" href=""><img class="itemimage img-fluid" src="img/item3.webp" alt=""></a>
</div>
<div class="mb-3">
<a class="items-ph" href=""><img class="itemimage img-fluid" src="img/item4.webp" alt=""></a>
</div>
<div class="mb-3">
<a class="items-ph" href=""><img class="itemimage img-fluid" src="img/item5.webp" alt=""></a>
</div>
</div>
<div class="col-7 mx-auto mb-3">
<img class="img-fluid" id="mainImage" src="img/item2.webp" alt="">
</div>
Можно ли как то обойтись без Js ?
Помогите пожалуйста.
