<div class="container">
  <img src="https://raw.githubusercontent.com/DaftCreation/Card-Slider/master/NEW%20YORK.jpg" alt="" class="c1">
  <img src="https://raw.githubusercontent.com/DaftCreation/Card-Slider/master/PARIS.jpg" alt="" class="c2">
  <img src="https://raw.githubusercontent.com/DaftCreation/Card-Slider/master/AGRA.jpg" alt="" class="c3">
</div>
<div class="prev">Previous</div>
<div class="next">Next</div>

body{
  margin: 0;
  padding: 0;
  background:#6bd6c6;
}
.container {
  position: absolute;
  top:35%;
  left:45%;
}
img{
  height:250px;
  width:150px;
  position: absolute;
  z-index:9;
  border:2px solid gray;
  transition:all 500ms ease;
}
.c1{
  transform:translateX(0) scale(1.5);
  z-index:99;
}
.c2{
  transform:translateX(-100px) scale(1);
}
.c3{
  transform:translateX(100px) scale(1);
}
.prev,.next{
  position: absolute;
  color:gray;
  border:2px solid gray;
  width:100px;
  height:30px;
  line-height:30px;
  text-align:center;
  cursor:pointer;
  top:50%;
  &:hover{
    background:darken(#6bd6c6,5%);
  }
}
.prev{left:20%;}
.next{right:20%}

//----------JQuery-----------------//
$(function(){
  flag=0;
  $('.next').click(function(){
    if(flag == 0){
      $('.c1').css({'transform':'translateX(-100px) scale(1)','z-index':'9'});
      $('.c2').css({'transform':'translateX(100px) scale(1)','z-index':'9'});
      $('.c3').css({'transform':'translateX(0) scale(1.5)','z-index':'99'});
      flag = 1;
    } else if(flag == 1){
      $('.c3').css({'transform':'translateX(-100px) scale(1)','z-index':'9'});
      $('.c1').css({'transform':'translateX(100px) scale(1)','z-index':'9'});
      $('.c2').css({'transform':'translateX(0) scale(1.5)','z-index':'99'});
      flag = 2;
    }else if(flag == 2){
      $('.c2').css({'transform':'translateX(-100px) scale(1)','z-index':'9'});
      $('.c3').css({'transform':'translateX(100px) scale(1)','z-index':'9'});
      $('.c1').css({'transform':'translateX(0) scale(1.5)','z-index':'99'});
      flag = 0;
    }
  });
  $('.prev').click(function(){
    if(flag == 0){
      $('.c3').css({'transform':'translateX(-100px) scale(1)','z-index':'9'});
      $('.c1').css({'transform':'translateX(100px) scale(1)','z-index':'9'});
      $('.c2').css({'transform':'translateX(0) scale(1.5)','z-index':'99'});
      flag = 1;
    } else if(flag == 1){
      $('.c1').css({'transform':'translateX(-100px) scale(1)','z-index':'9'});
      $('.c2').css({'transform':'translateX(100px) scale(1)','z-index':'9'});
      $('.c3').css({'transform':'translateX(0) scale(1.5)','z-index':'99'});
      flag = 2;
    }else if(flag == 2){
      $('.c2').css({'transform':'translateX(-100px) scale(1)','z-index':'9'});
      $('.c3').css({'transform':'translateX(100px) scale(1)','z-index':'9'});
      $('.c1').css({'transform':'translateX(0) scale(1.5)','z-index':'99'});
      flag = 0;
    }
  });
});