Как анимировать активный слайд 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>