Как мне написать скрипт для вывода изображения bootstrap 5 и js?

Question

[NsWeFront]

Добрый день !
Пытаюсь написать слайдер или аккордеон.
Как мне сделать так, чтобы при клике на мини-изображение_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 ?
Помогите пожалуйста.

Answer 1

[Aleksey Solovyev]

Через radio кнопки и label делайте если без js. Вот пример "на коленках" сделал:

Answer 2

[heaventold]

Думаю было бы лучше, не изобретать что-то новое, а использовать готовые библиотеке для слайдера.
Вместо pagination, которые за частую отображаются как точки, можно подставить изображения