<div id="main">
  <div id="slide">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
</div>
<div id="left"><</div>
<div id="right">></div>
body {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
}

#main {
  width: 400px;
  height: 210px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(1) rotate(0);
}

#left, #right {
  width: 20px;
  height: 210px;
  line-height: 210px;
  border: 0;
  text-align: center;
  background: black;
  opacity: 0.3;
  color: white;
  text-decoration: none;
  position: absolute;
  transform: translate(-50%, -50%) scale(1) rotate(0);
  top: 0;
  cursor: pointer;
  
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;
}

#left {
  left: -190px;
}

#right {
  left: 190px;
}

#slide {
  width: 1600px;
  height: 210px;
  transition: all 0.5s;
}

span {
  width: 400px;
  height: 210px;
  float: left;
  color: white;
  font-family: sans-serif;
  text-align: center;
  line-height:210px;
}

span:nth-child(1) {background:#E91E63}
span:nth-child(2) {background:#9C27B0}
span:nth-child(3) {background:#673AB7}
span:nth-child(4) {background:#3F51B5}
var slider = document.getElementById('slide'),
    btnLeft = document.getElementById('left'),
    btnRight = document.getElementById('right'),
    margin = 0;

btnRight.onclick = function slideRight() {
  if(margin <= -1200) {
    margin = 0;
  } else {
    margin = margin + -400;
  }
  slider.style.marginLeft = margin + "px";
}

btnLeft.onclick = function slideLeft() {
  if(margin >= 0) {
    margin = -1200;
  } else {
    margin = margin + 400;
  }
  slider.style.marginLeft = margin + "px";
}

setInterval(slideLeft, 1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.