SOURCE

<div class="window">
  <div id="slider" class="slider">
    <img src="https://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/img/sample_slides/macbook.jpg" alt="" />
    <img src="https://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/img/sample_slides/iphone.jpg" alt="" />
    <img src="https://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/img/sample_slides/imac.jpg" alt="" />
    <img src="https://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/img/sample_slides/info.jpg" alt="" />
  </div>
</div>
<div id="controls">
  <button>上一张</button>
  <button>下一张</button>
</div>
<div id="buttonWrapper">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>

*{margin:0;padding:0;}
*{box-sizing: border-box;}

.window{
    width:300px;
    height:200px;
    margin:30px auto;
    overflow: hidden;
}
.images{
    position: relative;
}
.images > img{
    width:300px;
    transition:all 1500ms;
    position: absolute;
    top:0;
}
.images > img.current{
    left: 0;
    transform: translateX(0);
    z-index: 1;
    opacity: 1;
}
.images > img.leave{
    transform: translateX(-100%);
    z-index: 1;
    opacity: 0;
}
.images > img.enter{
    transform: translateX(100%);
    opacity: 0;
}