Есть галерея с главным фото и слайдером под ним(там фото меньше) подскажите пожалуйста как сделать чтобы при клике на фото из слайдера менялось главное фото, делаю все на 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>