Edit History

It depends about what you is actually searching;

I am using library for slide next image, you can see it here.

If you will use this library, here is my code below (dont forget css styles,but this code is working below):

Also check swiper api parameters, you have a lot of features here (swiping delay, animations, zoom etc.)

 replace code in /templates/catalog/_patrials/product-cover-thumbnails.tpl

<div class="swiper-container " style="width:100%">
    <div class="swiper-wrapper">
      {foreach from=$product.images item=image}
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
        <img
        src="{$image.bySize.large_default.url}"
        alt="{$image.legend}"
        style="width:100%;"
        title="{$image.legend}"
        itemprop="image">
      </div>
      </div>
      {/foreach}
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      dynamicBullets: true,
    },
    zoom: {
      maxRatio: 3,
    },
  });
</script>

P.S. if question is solved, don't forget to press grey heart

It depends about what you is actually searching;

I am using library for slide next image, you can see it here.

If you will use this library, here is my code below (dont forget css styles,but this code is working below):

 replace code in /templates/catalog/_patrials/product-cover-thumbnails.tpl

<div class="swiper-container " style="width:100%">
    <div class="swiper-wrapper">
      {foreach from=$product.images item=image}
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
        <img
        src="{$image.bySize.large_default.url}"
        alt="{$image.legend}"
        style="width:100%;"
        title="{$image.legend}"
        itemprop="image">
      </div>
      </div>
      {/foreach}
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      dynamicBullets: true,
    },
    zoom: {
      maxRatio: 3,
    },
  });
</script>

P.S. if question is solved, don't forget to press grey heart