<div class="slider">
  <ul>
    <li class='show'><img src='https://images.pexels.com/photos/1785283/pexels-photo-1785283.jpeg'/></li>
    <li><img src='https://images.pexels.com/photos/204466/pexels-photo-204466.jpeg'/></li>
    <li><img src='https://images.pexels.com/photos/2605055/pexels-photo-2605055.jpeg'/></li>
  </ul>
  
  
<div class='nav'>
  <span class='select'></span>
    <span></span>
    <span></span>
  </div>
</div>

*{
  margin:0;
  padding:0;
}

body{
  background-color:rgb(255, 188, 0);
}

.slider{
  width:600px;
  margin:60px auto;
  
  ul{
    list-style:none;
    position:relative;
    width:600px;
    height:320px;
    border-radius:20px;
    overflow:hidden;
    box-shadow: 0 40px 100px rgb(0 0 0 / 40%);
    
    li{
      position: absolute;
      left: 100%;
      top:0;
      transition: left 1.4s,  opacity .5s ease;
      opacity: 0;
      
      img{
        width:600px
      }
      
      &.show{
        position:relative;
        left: 0;
        opacity: 1;
      }
      
      &.slidemove{
        left: -100%;
        opacity: 0;
      }
    }
  }
  
  
  .nav{
    width: 83px;
    margin: 0 auto;
    
    span{
      width:15px;
      height:15px;
      background-color:#333333;
      border-radius: 3px;
      margin:80px 5px 10px;
      display:inline-block;
      cursor: pointer;
      
      &.select{
        background-color:#ff007f !important;
      }
    }
  }
}

    $(document).ready(function () {
      $('.nav span').click(function () {
        $('.nav span').removeClass('select');
        $(this).addClass('select');
        $("li").removeClass('show');
        if ($(this).is(":first-child")) {
          $("li:first-child").addClass('show');
        } else if ($(this).is(":nth-child(2)")) {
          $("li:nth-child(2)").addClass('show');
        } else {
          $("li:nth-child(3)").addClass('show');
        }
        $("li.show").siblings().removeClass('show').addClass('slidemove');
        setTimeout(function () { $("li").removeClass('slidemove'); }, 400);
      })
    })