我需要添加make我的导航箭头移动图像

Question

嗨我需要我的导航箭头在我的自动幻灯片中来回移动图像，我的java脚本是如此笨拙它不起作用，幻灯片放映是基于CSS，我试图使用箭头上的JavaScript暂时移动它们直到幻灯片继续播放。

var main = function() {

  var paused = false

  $('.arrow-right').click(function() {
    paused = true;
    $('.slide-main > div:first')
      .next()
      .end()
      .appendTo('#slideshow');
  });

  $('.arrow-left').click(function() {
    paused = true;
    $('.slide-main > div:last')
      .prependTo('#slideshow')
      .next()
      .end();
  });


};

$(document).ready(main);

* {
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 512px;
  margin: 0;
}
.slide-container {
  height: 512px;
  width: 100%;
  overflow: hidden;
}
.slide-main {
  position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: left;
  overflow: hidden;
  animation: 30s slide infinite;
}
.slide {
  height: 512px;
  width: 20%;
  float: left;
}
@keyframes slide {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  90% {
    left: -300%;
  }
  95% {
    left: -400%;
  }
  100% {
    left: 0%;
  }
}
.arrow {} .arrow-left {
  padding: 20px;
}
.arrow-left:before {
  content: '';
  position: absolute;
  top: 42%;
  left: 3%;
  height: 9%;
  width: 2%;
  background: #ffffff;
  -webkit-transform: skew(135deg, 0deg);
  -moz-transform: skew(135deg, 0deg);
  -ms-transform: skew(135deg, 0deg);
  -o-transform: skew(135deg, 0deg);
  transform: skew(135deg, 0deg);
  border-radius: 15px 15px 0px 0px;
  opacity: .4;
}
.arrow-left:after {
  content: '';
  position: absolute;
  top: 51%;
  left: 3%;
  right: 60%;
  height: 9%;
  width: 2%;
  background: #ffffff;
  -webkit-transform: skew(-130deg, 0deg);
  -moz-transform: skew(-135deg, 0deg);
  -ms-transform: skew(-135deg, 0deg);
  -o-transform: skew(-135deg, 0deg);
  transform: skew(-135deg, 0deg);
  border-radius: 0px 0px 15px 15px;
  opacity: .4;
}
​ .arrow-right {
  padding: 20px;
}
.arrow-right:before {
  content: '';
  position: absolute;
  top: 42%;
  left: 95%;
  height: 9%;
  width: 2%;
  background: #ffffff;
  cursor: pointer;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
  border-radius: 15px 15px 0px 0px;
  opacity: .4;
}
.arrow-right:after {
  content: '';
  position: absolute;
  top: 51%;
  left: 95%;
  height: 9%;
  width: 2%;
  background: #ffffff;
  cursor: pointer;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
  border-radius: 0px 0px 15px 15px;
  opacity: .4;
}
​ .arrow-left:hover:before {
  box-shadow: 8px 1px 1px gray;
  opacity: 10;
  background: #ffffff;
}
.arrow-left:hover:before {
  box-shadow: 8px 1px 1px gray;
  opacity: 10;
  background: #ffffff;
}
.arrow-left:hover:after {
  box-shadow: 8px 1px 1px gray;
  opacity: 10;
  background: #ffffff;
}
.arrow-right:hover:before {
  box-shadow: -8px 1px 1px gray;
  opacity: 10;
  background: #ffffff;
}
.arrow-right:hover:after {
  box-shadow: -8px 1px 1px gray;
  opacity: 10;
  background: #ffffff;
}

<!--start-->
<div class="slide-container">
  <div class="slide-main">
    <img src="images/prop3.jpg" alt="" class="slide" />
    <img src="images/cover.jpg" alt="" class="slide" />
    <img src="images/cover2.jpg" alt="" class="slide" />
    <img src="images/drinkss.jpg" alt="" class="slide" />
    <img src="images/collection.jpg" alt="" class="slide" />
  </div>
</div>


<!--end-->
<div class="heacontai">
  <a class="arrow-left" role="button"></a>

  <a class="arrow-right" role="button"></a>
</div>