замена одного фото при клике на другие

[Влад99009]

Есть галерея с главным фото и слайдером под ним(там фото меньше) подскажите пожалуйста как сделать чтобы при клике на фото из слайдера менялось главное фото, делаю все на yii2
Пример на сайте: http://asvpage.ru/product/17

Вывожу картинки в магазине след образом:

<?= Html::img($mainImg->getUrl(), ['alt' => $product->name]) ?>

код всего блока с фото

<div class="col-sm-5">
	<div class="view-product">
		<?= Html::img($mainImg->getUrl(), ['alt' => $product->name]) ?>
		<!-- <h3>Увеличить</h3> -->
	</div>
	<div id="similar-product" class="carousel slide" data-ride="carousel">
		
		  <!-- Wrapper for slides -->
		    <div class="carousel-inner">
		    	<?php $count = count($gallery); $i = 0; foreach ($gallery as $img): ?>
		    		<?php if($i  % 3 == 0): ?>
							<div class="item <?php if($i == 0) echo ' active' ?>">
						<?php endif; ?>
						  <?= Html::img($img->getUrl('84x84'), ['alt' => '']) ?>
		    		<?php $i++; if($i % 3 == 0 || $i == $count):?>
						</div>
						<?php endif; ?>
					<?php endforeach; ?>
				</div>

		  <!-- Controls -->
		  <a class="left item-control" href="#similar-product" data-slide="prev">
			<i class="fa fa-angle-left"></i>
		  </a>
		  <a class="right item-control" href="#similar-product" data-slide="next">
			<i class="fa fa-angle-right"></i>
		  </a>
	</div>

</div>

[Nexus]

$('.carousel-inner').on('click','img',function(){
    $('.view-product img').attr('src',this.src);
});