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