JS to keep all lightbox thumbnails on screen

I've built a lightbox for some photos and I have a row of thumbnails at the bottom so that you can easily jump to any picture instead of the ones directly before or after the current image.

I used to use WordPress and in one of the lightbox plugins, there was a feature where, if you had more images than the width of the page could show, they would go off of the page, but when you used the arrows to go to one of the images that were off the page the line of thumbnails would automatically slide over so that the current image's thumbnail was on screen.

Some of my code is below to give you a sense of what I'm working with.

HTML: There's obviously a lot more since 3 images wouldn't run off the page, but this is for the general idea. The rest is more of the same.

<div class="row">

  <!-- Images on the page itself -->
  <div class="column">
    <img src="image-1.png" style="width:100%" onclick="openModal();currentSlide(1)" class="photo-1">
  </div>
  <div class="column">
    <img src="image-2" style="width:100%" onclick="openModal();currentSlide(2)" class="photo-2">
  </div>
  <div class="column">
    <img src="image-3" style="width:100%" onclick="openModal();currentSlide(3)" class="photo-3">
  </div>

  <!-- Images in the lightbox -->
  <div id="myModal" class="modal-container">
    <div class="modal">
      <span class="close cursor" id="handle" onclick="closeModal()">&times;</span>
      <div class="modal-content">
      <div class="mySlides">
        <div class="numbertext">1 / 3</div>
          <img src="image-1" style="width:100%">
      </div>
      <div class="mySlides">
        <div class="numbertext">2 / 3</div>
        <img src="image-2" style="width:100%">
      </div>
      <div class="mySlides">
        <div class="numbertext">3 / 3</div>
        <img src="image-3" style="width:100%">
      </div>
    </div>
  </div>

  <!-- Arrows -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

  <!-- Thumbnails in the lightbox-->
  <div class="column-inside-row">
    <div class="column-inside">
      <img class="demo cursor" src="image-1" style="width:100%" onclick="currentSlide(1)">
    </div>
    <div class="column-inside">
      <img class="demo cursor" src="image-2.png" style="width:100%" onclick="currentSlide(2)">
    </div>
      <div class="column-inside">
        <img class="demo cursor" src="image-3.png" style="width:100%" onclick="currentSlide(3)">
      </div>
    </div>
  </div>

</div>

CSS: There's obviously a lot more, but the only thing relevant here is what I have for the thumbnails. Otherwise, it's a classic lightbox setup.

.column-inside-row {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    z-index: 11;
}
.column-inside {
    margin: 0px 2px;
}
.demo:hover {
    transform: scale(105%);
    transition: .3s ease-out;
}

The only JS I have right now is for things like openModal and closeModal, which are just classic lightbox toggles. Those are irrelevant here.

Let me know if there's more that I can include. I know there's no JS to work with but I don't know where to start. Thanks in advance.