How to set up Slick Slider to center slides?

Question

JavaScript

Tell me please. There is a slider kenwheeler.github.io/slick

Simple structure

<div class="main-slider">
            <div>
                <a class="main-slider__slide" href="#">
                    <img src="/img-1.jpg">
                </a>
            </div>
            <div>
                <a class="main-slider__slide" href="#">
                    <img src="/img-2.jpg">
                </a>
            </div>
</div>

And simple js respectively

$(document).ready(function(){
        $('.main-slider').slick({

        });
    });

Now the point. The width of the slider is 1920. Tell me how to make it so that when the display is reduced, the center of the picture remains in the center. and the edges were hidden, I'll try to show in the pictures.

Answer 1

a {
  height: 100px;
  width: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
img {
  height: 100%;
  display: block;
  margin: auto;
}