Смена главного изображения товара

[laimas]

А как же это?

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

Только вы путаетесь с главными, коих у вас видимо точно нет. Что значит первый, второй и т.д. "главный", это вы только о миниатюрах или первое "главное", это большое фото?

[Dilettante_Pro]

Попытка вангования

<style>
.product-item-detail-slider-image {
     display:none;
     width:300px;
     height:100px;
     overflow:hidden;
}
.product-item-detail-slider-controls-image {
     display:inline-block;
     width:30px;
     height:30px;
     overflow:hidden;
}
.active {
     display:inline-block;
     border:2px solid green;
}
</style>
<div>
<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>
</div>
<div>
<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>

<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>

<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>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var big = $(".product-item-detail-slider-image");
var small = $(".product-item-detail-slider-controls-image").click(function(){
    small.removeClass("active"); 
    $(this).addClass("active");
    big.removeClass("active");
    $(".product-item-detail-slider-image[data-id=" + $(this).data('id') +"]").addClass("active");
     
})
</script>

[_marisha]

laimas, "первое "главное", это большое фото" - главное это большое фото (которое в рамке Например: скрин 2 - главное фото розовое, скрин 4 - главное фото белое)
При просмотре кода есть ссылка на большое фото, которое становится главным (т.е. в рамку) если есть класс active
Скрин 2 - ссылка на большое фото, а также класс active
Скрин 3 - ссылка на большое фото, а класса active нет
Скрин 4 - у розового фото убираем класс active и добавляем класс active белому большому фото. После чего фото становится главным, т.е. в рамке.

[_marisha]

Скрины во вложении

[laimas]

_marisha, нет у вас никаких главных фото, от этого термина кроме путаницы ничего. Главное или фото по умолчанию, это параметр, который определяет фото по умолчанию при выводе списка товаров (не в карточке товара).

У вас же обычный слайдер и щелчком по миниатюре она отображается увеличенной. И судя по тому что вы писали ранее, а также по классам элементов на представленных фото, код и CSS слайдера у вас уже есть. Если сейчас вам писать примеры и вы их реализуете, то возможны путаница или конфликты. Поэтому нужно просто проанализировать имеющееся и выполнить код согласно описанию вашего слайдера.

Я так думаю.