幻灯片更改后暂停html视频，圆滑的旋转木马

<video id="myVideo" src="video.mp4"></video>

var video = document.getElementById("myVideo");
var slide = document.getElementById("slide");

slide.addEventListener("change", function() {
  video.pause();
});

<div id="carousel">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  ...
</div>

#carousel {
  width: 500px;
  height: 300px;
  position: relative;
  perspective: 1000px;
}

#carousel img {
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transition: transform 1s;
}

#carousel img:nth-child(1) {
  transform: rotateY(0deg) translateZ(200px);
}

#carousel img:nth-child(2) {
  transform: rotateY(60deg) translateZ(200px);
}

#carousel img:nth-child(3) {
  transform: rotateY(120deg) translateZ(200px);
}

...

var carousel = document.getElementById("carousel");
var angle = 0;

function rotateCarousel() {
  carousel.style.transform = "rotateY(" + angle + "deg)";
}

document.addEventListener("keydown", function(event) {
  if (event.keyCode === 37) { // 左箭头键
    angle -= 60;
    rotateCarousel();
  } else if (event.keyCode === 39) { // 右箭头键
    angle += 60;
    rotateCarousel();
  }
});