How to place the active slide in the middle in Slick slider?

Question

JavaScript

Hello, there is a slick slider in the project, the project is working, changing the slider to another one will not work, how to place the active slide in the center, and not on the left.
If you use centerMode, then parts of other slides appear on the sides, how can this be implemented?

The code:

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    arrows: false,
    focusOnSelect: true,
    // centerMode: true
});

Answer 1

What is the problem with cutting off the excess on the sides of the wrapper with centerMode ?
There are also a bunch of type events beforeChangeand you can give a class to the next slide and style it. Example