Swiper and Javascript: Going to particular slides with external buttons

[Jay-Bruh]

So I have a Swiper Js element that contains all my slides like so:

<div class="swiper-container" style="margin-top:-50px">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="../assets/images/Brown Tang.png" style="width: 500px; height: 250px;margin-top: -30px;"></div>
          <div class="swiper-slide"><img src="../assets/images/Orange-band Surgeonfish.png" style="width: 500px; height: 280px;margin-top: -30px;"></div>
          <div class="swiper-slide"><img src="../assets/images/Blue Tang.png" style="width: 450px; height: 270px;margin-top: -30px;"></div>
  </div>
</div>

And at the bottom I have an Image gallery thumbnail buttons like so:

<button type="button" class="image-gallery-thumbnail active" style="width: 150px;height: 90px;">
   <div class="image-gallery-thumbnail-inner">
        <img class="image-gallery-thumbnail-image" src="../assets/images/Brown Tang.png">
    </div>                     
 </button>
 <button type="button" class="image-gallery-thumbnail" style="width: 150px;height: 90px;">
    <div class="image-gallery-thumbnail-inner">
        <img class="image-gallery-thumbnail-image" src="../assets/images/Orange-band Surgeonfish.png">
     </div>
  </button>

I want it so that whenever I press the particular button, it's respective slider image should be brought up.

[nolimits4web]

You need to use Swiper API for that, it has swiper.slideTo() method which you should call on your thumb click