<div class="galery">
<div class="slider-for">
<div class="item"><img class="img-base" src="img/gal1.jpg" alt=""></div>
</div>
<div id="slider-nav" class="slider-nav">
<div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product.jpg" alt=""></div>
<div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product2.jpg" alt=""></div>
<div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product3.jpg" alt=""></div>
<div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product.jpg" alt=""></div>
<div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product2.jpg" alt=""></div>
<div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product3.jpg" alt=""></div>
<div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product.jpg" alt=""></div>
<div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product2.jpg" alt=""></div>
<div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product3.jpg" alt=""></div>
<div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product.jpg" alt=""></div>
</div>
</div><!--galery-->
$('.img-tp').click(function(){
var srcimg = $(this).data('bigimg');
$('.img-base').attr('src', srcimg);
$('.nav-item').addClass('active').siblings().removeClass('active');
});
$('.img-tp').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});