Slide carousel on click, snap to center

I’m trying to make a carousel slide with images, I want it to be able to slide to the next and prev image on click, and I need to snap each image/slide to the center of the window. But each image has varying widths, how can I achieve this? Perhaps with gsap?

Currently the slides in this code snippet have the same width but I will be using images of varying widths in my actual project.

.scroll-container {
    position: absolute;
    overflow-y: hidden;
    white-space: nowrap;
    background: transparent;
    height: 100vh;
    width: 100vw;
    margin-right: 0;
    border: 4px solid pink;
    display: flex;
}

.gridscroll {
    display: flex;
    height: 100%;
    border: 2px solid yellow;
}

.project-sections {
  height: 100%;
  width:  600px;
  background-color:green;
  border: 2px solid blue;
}


#scroll-right {
  position: fixed;
  /* width: 49vw;
  height: 94vh; */
  width: 60px;
  height: 60px;
  right:0;
  cursor: grab;
  background-color: red;
}
#scroll-left {
  position: fixed;
  /* width: 49vw;
  height: 94vh; */
  width: 60px;
  height: 60px;
  left:0;
  cursor: grab;
  background-color: red;
}
<div class="scroll-container">
  <div class="gridscroll">
    <div class="project-sections">
      <img src="" />
    </div>
    <div class="project-sections">
      <img src="" />
    </div>
    <div class="project-sections">
      <img src="" />
    </div>
    <div class="project-sections">
      <img src="" />
    </div>
    <div class="project-sections">
      <img src="" />
    </div>
    <div class="project-sections">
      <img src="" />
    </div>
    <div class="project-sections">
      <img src="" />
    </div>
    
    <div id="scroll-right"></div>
    <div id="scroll-left"></div>
  </div>
</div>