Не получается поправить слайдер

$('.slider').each(function() {
  var $this = $(this),
    $blockArrows = $('.controls-arrows', $this),
    $blockDots = $('.controls-dots', $this),
    $slider = $('.slick', $this);
  $(".slick")
    .on("init", () => {
      $('.slick-slide[data-slick-index="-2"]').addClass("lt2");
      $('.slick-slide[data-slick-index="-1"]').addClass("lt1");
      $('.slick-slide[data-slick-index="1"]').addClass("gt1");
      $('.slick-slide[data-slick-index="2"]').addClass("gt2");
    })
    .slick({
      centerMode: true,
      centerPadding: 0,
      slidesToShow: 5,
      dots: true,
      arrows: true,
      appendArrows: $blockArrows,
      appendDots: $blockDots
    })
    .on("beforeChange", (event, slick, current, next) => {
      $(".slick-slide.gt2").removeClass("gt2");
      $(".slick-slide.gt1").removeClass("gt1");
      $(".slick-slide.lt1").removeClass("lt1");
      $(".slick-slide.lt2").removeClass("lt2");

      const lt2 = current < next && current > 0 ? current - 1 : next - 2;
      const lt1 = current < next && current > 0 ? current : next - 1;
      const gt1 = current < next || next === 0 ? next + 1 : current;
      const gt2 = current < next || next === 0 ? next + 2 : current + 1;

      $(`.slick-slide[data-slick-index="${lt2}"]`).addClass("lt2");
      $(`.slick-slide[data-slick-index="${lt1}"]`).addClass("lt1");
      $(`.slick-slide[data-slick-index="${gt1}"]`).addClass("gt1");
      $(`.slick-slide[data-slick-index="${gt2}"]`).addClass("gt2");

      // Clone processing when moving from 5 to 0
      if (current === 5 && next === 0) {
        $(`.slick-slide[data-slick-index="${current - 1}"]`).addClass("lt2");
        $(`.slick-slide[data-slick-index="${current}"]`).addClass("lt1");
        $(`.slick-slide[data-slick-index="${current + 2}"]`).addClass("gt1");
        $(`.slick-slide[data-slick-index="${current + 3}"]`).addClass("gt2");
      }

      // Clone processing when moving from 0 to 5
      if (current === 0 && next === 5) {
        $(`.slick-slide[data-slick-index="${current - 1}"]`).addClass("gt2");
        $(`.slick-slide[data-slick-index="${current}"]`).addClass("gt1");
        $(`.slick-slide[data-slick-index="${current - 2}"]`).addClass("lt1");
        $(`.slick-slide[data-slick-index="${current - 3}"]`).addClass("lt2");
      }

      console.log("beforeChange", current, ":", lt2, lt1, next, gt1, gt2);
    });
});

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20vh 0;
}

.slick span {
  display: block;
  background: #3498db;
  color: #fff;
  font-size: 36px;
  width: 380px;
  text-align: center;
  height: 250px;
  margin: 0 auto;
  line-height: 100px;
  position: relative;
  text-align: center;
  //border: solid 1px rgb(145, 195, 0);
  transform: translate(0, 0) scale(0.4);
  transition: all 0.4s ease;
  opacity: 0.5;
}

.slick-slide {
  border: solid 1px #2dc37f;
}

.slick-slide.lt2 span {
  transform: translate(10%, 0) scale(0.6);
}

.slick-slide.lt1 span {
  opacity: 0.7;
  transform: translate(5%, 0) scale(0.8);
}

.slick-slide.gt1 span {
  opacity: 0.7;
  transform: translate(-5%, 0) scale(0.8);
}

.slick-slide.gt2 span {
  transform: translate(-10%, 0) scale(0.6);
}

.slick-slide.slick-center span {
  z-index: 1;
  transform: scale(1);
  opacity: 1;
  color: #e67e22;
}

.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  appearance: none;
  margin-top: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  z-index: 100;
}

.slick-next:focus,
.slick-next:hover {
  color: #f61067;
  background: url(https://image.flaticon.com/icons/svg/109/109617.svg) no-repeat;
}

.slick-prev:focus,
.slick-prev:hover {
  color: #f61067;
  background: url(https://image.flaticon.com/icons/svg/109/109618.svg) no-repeat;
}

.slick-prev {
  width: 20px;
  height: 20px;
  position: absolute;
  background: url(https://image.flaticon.com/icons/svg/109/109618.svg) no-repeat;
  left: 0;
  color: #f61067;
}

.slick-next::before {
  display: none;
}

.slick-prev::before {
  display: none;
}

.slick-next {
  width: 20px;
  height: 20px;
  position: absolute;
  background: url(https://image.flaticon.com/icons/svg/109/109617.svg) no-repeat;
  right: 0;
  color: #f61067;
}

.slick-dots {
  li {
    margin: 0;
    button {
      position: relative;
    }
    button:before {
      position: absolute;
      content: "";
      top: -1;
      left: 5;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #f61067;
      opacity: 1;
    }
  }
}

.slick-dots li.slick-active button:before {
  width: 12px;
  height: 12px;
  opacity: 1;
  color: #000;
  top: -1px;
}

.slick-active {
  position: reletive;
}

.slick-dots li.slick-active button:after {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  top: 2px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  z-index: 5;
}

.controls {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-top: 45px;
}

.controls-arrows,
.controls-dots {
  text-align: center;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.controls-dots .slick-dots {
  position: relative;
  bottom: auto;
}

.controls-arrows .slick-prev,
.controls-arrows .slick-next {
  position: relative;
  left: auto;
  right: auto;
  display: inline-block;
  top: auto;
  transform: none;
  vertical-align: middle;
}

.controls-arrows .slick-prev:before,
.controls-arrows .slick-next:before {
  color: #919191;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="slider">
  <div class="slick">
    <div><span>1</span></div>
    <div><span>2</span></div>
    <div><span>3</span></div>
    <div><span>4</span></div>
    <div><span>5</span></div>
    <div><span>6</span></div>
    <div><span>7</span></div>
  </div>
  <div class="controls">
    <div class="controls-arrows">
      <div class="controls-dots"></div>
    </div>
  </div>
</div>