Не срабатывает скрипт

var $card = $('.material_card'); 
var lastCard = $(".material_card-list .material_card").length - 1; 
 
$('.material_next').click(function(){  
	var prependList = function() { 
		if( $('.material_card').hasClass('activeNow') ) { 
			var $slicedCard = $('.material_card').slice(lastCard).removeClass('transformThis activeNow'); 
			$('ul').prepend($slicedCard); 
		} 
	} 
	$('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow'); 
	setTimeout(function(){prependList(); }, 150); 
}); 
 
$('.material_prev').click(function() { 
	var appendToList = function() { 
		if( $('.material_card').hasClass('activeNow') ) { 
			var $slicedCard = $('.material_card').slice(0,1).addClass('transformPrev'); 
			$('.material_card-list').append($slicedCard); 
		}} 
	 
			$('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow'); 
	setTimeout(function(){appendToList();}, 150); 
});

.material_card-stack { 
  width: 700px; 
  height: 250px; 
  position: absolute; 
  margin: 20px auto; 
} 
.material_card-stack .material_buttons { 
/*   display: none; */ 
  position: absolute; 
  background: rgba(0, 0, 0, 0.46); 
  border: 2px solid rgba(255, 255, 255, 0.7); 
  border-radius: 50%; 
  width: 35px; 
  height: 35px; 
  left: 0; 
  top: 55%; 
  color: rgba(255, 255, 255, 0.7); 
  text-align: center; 
  line-height: 35px; 
  text-decoration: none; 
  font-size: 22px; 
  z-index: 100; 
  outline: none; 
  transition: all 0.2s ease; 
} 
/* .card-stack .buttons:hover { 
  transform: scale(1.3, 1.3); 
} */ 
.material_card-stack .material_prev { 
  left: 15px; 
  right: auto; 
} 
.material_card-stack .material_next { 
  left: auto; 
  right: 15px; 
} 
.material_card-stack .carousel .material_buttons:hover { 
  color: #C01313 ; 
  background: #fff; 
} 
.material_card-stack .material_card-list { 
  width: 300px; 
} 
.material_card-stack .material_card-list li { 
  transition: all 100ms ease-in-out; 
  border-radius: 2px; 
  position: absolute; 
  list-style: none; 
  height: 300px; 
  -webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5); 
  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5); 
  left: 0; 
  right: 0; 
  margin: 0 auto; 
  padding-top: 20px; 
  text-align: center; 
  background-size: cover; 
} 
.material_card-stack .material_card-list li:nth-child(1) { 
  top: 24px; 
  width: 60%; 
  /* animation: scaleCard 100ms; */ 
 
} 
.material_card-stack .material_card-list li:nth-child(2) { 
  top: 36px; 
  width: 70%; 
} 
.material_card-stack .material_card-list li:nth-child(3) { 
  top: 48px; 
  width: 80%; 
} 
.material_card-stack .material_card-list li:nth-child(4) { 
  top: 60px; 
  width: 90%; 
} 
.material_card-stack .material_card-list li:nth-child(5) { 
  top: 72px; 
  width: 100%; 
} 
.material_card-stack:hover > .material_buttons.material_prev { 
  display: block; 
  animation: bounceInLeft 200ms; 
} 
.material_card-stack:hover > .material_buttons.material_next { 
  display: block; 
  animation: bounceInRight 200ms; 
} 
.transformThis { 
  animation: scaleDown 500ms; 
} 
.transformPrev { 
  animation: scaleUp 100ms; 
} 
@keyframes scaleUp { 
  0% { 
    transform: scale(1.2) translateY(50px); 
    opacity: 0; 
  } 
  20% { 
    transform: scale(1.15) translateY(40px); 
    opacity: 0.10; 
  } 
  40% { 
    transform: scale(1.1) translateY(30px); 
    opacity: 0.20; 
  } 
  60% { 
    transform: scale(1.05) translateY(20px); 
    opacity: 0.40; 
  } 
  80% { 
    transform: scale(1.01) translateY(10px); 
    opacity: 0.80; 
  } 
  100% { 
    transform: scale(1) translateY(0); 
    opacity: 1; 
  } 
} 
@keyframes scaleDown { 
  0% { 
    transform: scale(1) translateY(0); 
    opacity: 1; 
  } 
  20% { 
    transform: scale(1.01) translateY(20px); 
    opacity: 0.80; 
  } 
  40% { 
    transform: scale(1.05) translateY(40px); 
    opacity: 0.40; 
  } 
  60% { 
    transform: scale(1.1) translateY(60px); 
    opacity: 0.20; 
  } 
  80% { 
    transform: scale(1.15) translateY(80px); 
    opacity: 0.10; 
  } 
  100% { 
    transform: scale(1.2) translateY(100px); 
    opacity: 0; 
  } 
} 
@keyframes scaleCard { 
  0% { 
    top: 5px; 
  } 
  100% { 
    top: 24px; 
  } 
/* } 
 @keyframes bounceInLeft { 
  0% { 
    opacity: 0; 
    transform: translateX(40px); 
  } 
  100% { 
    transform: translateX(0); 
  } 
}  
@keyframes bounceInRight { 
  0% { 
    opacity: 0; 
    transform: translateX(-40px); 
  } 
  100% { 
    transform: translateX(0); 
  } 
}  */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="material_card-stack"> 
				<a class="material_buttons material_prev" href="#"><</a> 
				<ul class="material_card-list"> 
					<li class="material_card" style="background-color: #FF3B30;"></li> 
					<li class="material_card" style="background-color: #34AADC;"></li>			 
					<li class="material_card" style="background-color: #FF9500;"></li> 
			</ul>	 
			<a class="material_buttons material_next" href="#">></a> 
		</div>