Bootstrap kullanarak bir resim galerisi oluşturdum.

<!-- GÖRSELLERİN KÜÇÜK RESİMLERİ -->
<div class="col-md-2">
  <ol class="list-unstyled images-thumbs">
    <li data-target="#slider" data-slide-to="0">
        <img data-src="" src="">
    </li>
    <li data-target="#slider" data-slide-to="1">
        <img data-src=""src="">
    </li>
    <li data-target="#slider" data-slide-to="2">
        <img data-src="" src="">
    </li>
    </ol>
</div>

<!-- ANA GALERİ GÖRSELLERİ -->
<div class="col-sm-12 col-md-10">
  <div class="slider">
    <div id="slider" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="">
        </div>
        <div class="carousel-item">
          <img src="">
        </div>
        <div class="carousel-item">
          <img src="">
        </div>
      </div>
      <ol class="carousel-indicators">
        <li data-target="#slider" data-slide-to="0" class="active"></li>
        <li data-target="#slider" data-slide-to="1"></li>
        <li data-target="#slider" data-slide-to="2"></li>
      </ol>
      <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">PREV</span>
      </a>
      <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">NEXT</span>
      </a>
    </div>
  </div>
</div>

Buradadaki resimlerden aktif olan resmin üzerine gelince kendi içinde yakınlaştırmasını (zoom yapmasını) istiyorum.

E-Ticaret sitelerinde karşınıza çıkan bir durumdur. (Örn. N11 ürün sayfasındaki resim galerisi)

Bu konuda önerebileceğiniz eklentiler nelerdir.

Bir çok eklenti denedim fakat tek resimde çalışıyor, çok resimde çalışmıyor.