[_marisha]

laimas, Ну так почему же вы в цикле его выводите причем с одного и того же массива? - это стандартный функционал cms. Как разработчики cms решили реализовать функционал, так он и есть )

При просмотре кода в главном изображении ссылки на изображение подставляются верные, также есть id элемента.
Пример главного изображения

<div class="product-item-detail-slider-image active" data-entity="image" data-id="527272">
                    <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/12d/12df2af2e5c16efc0a77e757f459fd76.jpeg?1535898042160977" alt="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;" title="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;" itemprop="image">
                  </div>

- это изображение первого фото

<div class="product-item-detail-slider-image" data-entity="image" data-id="532948">
                    <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/f95/f95fabeee85b209c6b04aab38098adeb.jpeg?1535954017383055" alt="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;" title="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;">
                  </div>

- это изображение второго фото (в миниатюре белое)

<div class="product-item-detail-slider-image" data-entity="image" data-id="532949">
                    <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/b9c/b9ce63003808a31d76c42ce226d42ffd.jpeg?1535954017327525" alt="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;" title="&quot;Атлас стрейч одн.&quot;Жара&quot;&quot;">
                  </div>

- это изображение 3 (в миниатюре зеленое)

Если просмотреть код миниатюры:
1)

<div class="product-item-detail-slider-controls-image active" data-entity="slider-control" data-value="18798_527272" data-id="527272">
                      <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/12d/12df2af2e5c16efc0a77e757f459fd76.jpeg?1535898042160977">
                    </div>

2)

<div class="product-item-detail-slider-controls-image" data-entity="slider-control" data-value="18798_532948" data-id="532948">
                      <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/f95/f95fabeee85b209c6b04aab38098adeb.jpeg?1535954017383055">
                    </div>

3)

<div class="product-item-detail-slider-controls-image" data-entity="slider-control" data-value="18798_532949" data-id="532949">
                      <img src="//opt-1208453.ssl.1c-bitrix-cdn.ru/upload/iblock/b9c/b9ce63003808a31d76c42ce226d42ffd.jpeg?1535954017327525">
                    </div>

Первой полной картинке изначально добавляется класс active. Эксперимент: если вручную убрать класс active (product-item-detail-slider-image active) у первого главного изображения и добавить класс active второму главному изображению, то картинка главная меняется.

Вопрос: возможно ли сделать так, чтобы класс active добавлялся главному изображению при нажатии на соответствующую миниатюру? Может как-то возможно сопоставить по data-id?