Pause on Hover for Infinitie Horizontal Carousel

Question

Found an infinite horizontal carousel I like but need to find an alternative to animation-play-state (not working on iOS) for pause on hover. I'm not familiar enough with JavaScript to piece together other resources I've found, so I'd really appreciate some guidance.

The goal of course is for the entire carousel to pause when hovering over an individual slide.

HTML

<div class="slider">
<div class="slide-track">
    <div class="slide">
        <img src="https://www.weebly.com/editor/uploads/1/1/8/4/118407766/custom_themes/170592326218648048/files/images/phriendle-icon-white.png">
    </div>
    <div class="slide">
        <img src="https://www.weebly.com/editor/uploads/1/1/8/4/118407766/custom_themes/170592326218648048/files/images/piccial-icon-white.png">
    </div>
    <div class="slide">
        <img src="https://www.weebly.com/editor/uploads/1/1/8/4/118407766/custom_themes/170592326218648048/files/images/textcial-icon-white.png">
    </div>
    <div class="slide">
        <img src="https://www.weebly.com/editor/uploads/1/1/8/4/118407766/custom_themes/170592326218648048/files/images/phaveit-icon-white.png">
    </div>
    <div class="slide">
        <img src="https://www.weebly.com/editor/uploads/1/1/8/4/118407766/custom_themes/170592326218648048/files/images/connectial-icon-white.png">
    </div>
    </div>

CSS

body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-200px * 5));
            transform: translateX(calc(-200px * 5));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-200px * 5));
            transform: translateX(calc(-200px * 5));
  }
}
.slider {
  background: white;
  height: 100vh;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.slider::before, .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100%;
  position: absolute;
  width: 0;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  -webkit-animation: scroll 30s linear infinite;
  animation: scroll 30s linear infinite;
  display: flex;
  width: calc(200px * 10);
}
.slider .slide-track:hover {
}
.slider .slide {
  height: 100%;
  width: 200px;
  transition: all .5s ease;
  cursor: pointer;
}

.slider .slide:hover {
  transform: scale(1.1);
}

.slider .slide img {
  position: relative;
  display: inline-block;
  max-width: 200px;
  width: 200px;
  height: auto;
}