Как анимировать активный слайд slick slider?

Нужна анимация для активного центрального слайдера. Когда слайдер инициализируется, анимация почему-то не работает, первый раз переключаю слайд, анимация срабатывает на нем, но при следующей прокрутке вперед назад начинают работать анимации так же на соседних элементах. ( 2 и 1, потом 3, 2 и 1) Как сделать чтобы анимация всегда работала только на активном слайде, а на других не работала?

$('.slider-nav').slick({
   slidesToShow: 3,
   slidesToScroll: 1,
   dots: true,
  centerMode: true
 }).on('afterChange', function(e, slick) {
   currentclick();
$('.item').removeClass('jump');
  });

function currentclick(){
$('.slick-current').on('click', function(event) {
  event.preventDefault();
   $(this).addClass('jump');
});
}
body{
  background:#ccc;
}
.main {
  font-family:Arial;
  width:500px;
  display:block;
  margin:0 auto;
}
h3 {
    background: #fff;
    color: #3498db;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}
.action{
  display:block;
  margin:100px auto;
  width:100%;
  text-align:center;
}
.action a {
  display:inline-block;
  padding:5px 10px; 
  background:#f30;
  color:#fff;
  text-decoration:none;
}
.action a:hover{
  background:#000;
}

.jump{
  margin-top: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">

  <div class="slider slider-nav">
    <div class="item"><h3>1</h3></div>
    <div class="item"><h3>2</h3></div>
    <div class="item"><h3>3</h3></div>
    <div class="item"><h3>4</h3></div>
    <div class="item"><h3>5</h3></div>
  </div>

</div>

Рабочий пример


Ответы (0 шт):