SlickSlider | Как реализовать, что бы при прокрутке задавался класс для соседних слайдеров

Нужно реализовать слайдер с отзывами, как на изображении. Для реализации выбрал slickslider, как раз есть такая возможность с помощью Slider Syncing. Но возникла проблема с размерами фото. Центральная не проблематична, т.к. у нее через параметр centerMode добавляется класс .slick-center. Нужно для соседей от центральной также задать свой класс, который будет при пролистывании слайдера применяться к новым изображениям, так же как и центральный. и уже этому классу планирую задать стили, что бы уменьшить размер изображений. Как это возможно реализовать? Вот код ызова самого слайдера

$(document).ready(function(){

$('.slider-nav').slick({

slidesToShow: 3,

slidesToScroll: 1,

asNavFor: '.slider-for',

dots: false,

centerMode: true,

focusOnSelect: true,

infinite: true,

});

$('.slider-for').slick({

slidesToShow: 1,

slidesToScroll: 1,

arrows: false,

fade: true,

asNavFor: '.slider-nav'

});

});

Для соседей присовил свой класс .slide-medium-size через

$(document).ready(function(){

$('.slick-center').prev().addClass('slide-medium-size');

//To select all next elements of `.current` element:

$('.slick-center').next().addClass('slide-medium-size');

});

Ну как повесить все это на события, что бы при пролистывании центральный оставался с классом '.slick-center', а к первым боковым соседям применялся '.slide-medium-size'. Буду благодарен за помощь т.к. в JS пока нулевой.