Jerky slide transition in Slick. Is there a solution?

Question

css

.team__slider-character {
  display: flex;
  width: 100%;
  height: 160px;
  margin-top: 98px;
  & .slick-slider.slick-initialized {}
  & .slick-slider.slick-dotted {}
  & .slick-list {
    width: 500px;
    height: 160px;
    margin: 0 auto;
    overflow: hidden;
  }
    & .slick-track {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1920px;
      height: 160px;
      margin: 0 auto;
      &.slick-slide {
        min-width: 100px;
        min-height: 100px;
        transition: 300ms ease-out;
      }
      & .slick-active {
        transition: 300ms ease-out;
      }
      & .slick-current {}
      & .slick-center {
        width: 160px;
        height: 160px;
        transition: 300ms ease-out;
      }
      & .slick-cloned {}
    }
  & .slick-arrow {}
  & .slick-prev {}
  & .slick-next {}
  & .slick-disabled {}
  & .slick-dots {}
  & .slick-dots li {}
  & .slick-dots li.slick-active {}
  & .slick-dots li button {}
}
.avatar {
  width: 100px;
  height: 100px;
  max-width: 160px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.team__sophie-turner-copy {
  background-image: url(../img/SophieTurner.png);
}
.team__sophie-turner-one {
  background-image: url(../img/SophieTurner.png);
}
.team__sophie-turner-two {
  background-image: url(../img/SophieTurner.png);
}
.team__sophie-turner-three {
  background-image: url(../img/SophieTurner.png);
}

<section class="team">
      <div class="team__title"><h2 class="title">Our Team</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p></div>
      <div class="team__slider-character">
        <div class="avatar team__sophie-turner-one"></div>
        <div class="avatar team__sophie-turner-two"></div>
        <div class="avatar team__sophie-turner-three"></div>
        <div class="avatar team__sophie-turner-copy"></div>
      </div>
      <div class="team__slider-text"></div>
    </section>

$(document).ready(function() {
  $('.team__slider-character').slick({
    arrows:false,
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: false,
    focusOnSelect: true,
    centerMode: true,
    centerPadding: '30px',
    variableWidth: true,
    variableHeight: true,
    infinite: true,
  })
});

Very tired of slick, a lot of bugs and misunderstandings, stuck on the fact that I can’t make a smooth transition to the next slide, or even remove the lock on scrolling (slidesToShow is blocked by centerMode).

Please help with advice on cleaning up the code and one more problem: how to connect lazy-load to before with background-image? Or, for example, to make sure that the picture is not loaded every new time, I will be very grateful.

.testimonals__comments {
  & #JohnDoe:before {
    content: url(../img/doe.png);
    position: absolute;
    top: 47.5px;
    left: -110px;
  }
  & #Khalessi:before {
    content: url(../img/lessi.png);
    position: absolute;
    top: 47.5px;
    left: -110px;
  }
  & #Doe:before {
    content: url(../img/doe.png);
    position: absolute;
    top: 47.5px;
    left: -110px;
  }
  & #Lessi:before {
    content: url(../img/lessi.png);
    position: absolute;
    top: 47.5px;
    left: -110px;
  }
}
.comment {
  position: relative;
  width: 350px;
  height: 160px;
  padding: 28px 64px 32px 30px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
  & h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.39;
    color: #061e37;
    margin-bottom: 10px;
  }
  & p {
    line-height: 1.67;
    color: #78909c;
    font-style: italic;
  }
}
.testimonals__comments { // .slick-slider
  position: relative;
  & .slick-slider.slick-initialized {}
  & .slick-slider.slick-dotted {}
  & .slick-list {
    display: flex;
    width: 760px;
    max-height: 405px;
    flex: 1 1 60%;
    justify-content: flex-end;
    overflow: hidden;
    & 	.slick-track {
      display: flex;
      width: 650px;
      flex-direction: column;
      user-select: none;
      & .slick-slide {
      max-width: 650px;
      height: 160px;
      margin: 0 0 70px;
        & .slick-active {}
        & .slick-current {}
        & .slick-center {}
        & .slick-cloned {}
      }
    }
  }
  & .slick-arrow {
    position: relative;
    left: 50%;
    display: flex;
    font-size: 0;
    width: 25px;
    height: 15px;
    margin-left: 35px;
    cursor: pointer;
  }
  & .slick-prev {
    margin-bottom: 32px;
    background: url(../img/arrowUp.png) no-repeat center;
  }
  & .slick-next {
    margin-top: 17px;
    background: url(../img/arrowDown.png) no-repeat center;
  }
  & .slick-disabled {}
  & .slick-dots {}
  & .slick-dots li {}
  & .slick-dots li.slick-active {}
  & .slick-dots li button {}
}

$(document).ready(function() {
  $('.testimonals__comments').slick({
    arrows:true,
    vertical: true,
    verticalSwiping: true,
    slidesToShow: 2,
    lazyLoad: 'ondemand',
    variableHeight: false,
    infinite: true,
  });
});