光滑的滑块跳跃？

Question

//Initialize slick slider
$(document).ready(function() {
  $(".coverflow").slick({
    dots: false,
    arrows: true,
    infinite: true,
    centerMode: true,
    centerPadding: '150px',
    variableWidth: true,
    focusOnSelect: true,
    speed: 1000,
    autoplay: true,
    autoplaySpeed: 2500,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    }, ],
  });
});
//add slick-center class to create the carousel effect
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  $('.slick-center').removeClass('slick-center');
  $('.slick-slide').eq(nextSlide).addClass('slick-center');
})
//add the slick container class 
;
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  $('.slick-center .slide-container').removeClass('slick-center');
  $('.slick-slide').eq(nextSlide).find('.slide-container').addClass('slick-center');
});

//progress bar for slick slider
$(document).ready(function() {
  var $slider = $('.coverflow');
  var $progressBar = $('.progress');
  var $progressBarLabel = $('.slider__label');

  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;

    $progressBar
      .css('background-size', calc + '% 100%')
      .attr('aria-valuenow', calc);

    $progressBarLabel.text(calc + '% completed');
  });
});

.progress {
  max-width: 800px!important;
  margin-right: auto;
  margin-left: auto;
  display: block;
  width: 75%;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background-color: #5B5B5B;
  background-image: linear-gradient(to right, #FA5927, #FA5927);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .4s ease-in-out;
  margin-top: 55px;
}

.slide-number {
  color: #FA5927;
  font-family: 'PT SANS';
  font-size: var(--wp--preset--font-size--medium)!important;
  padding: 10px;
}

.slide-container {
  margin-right: 50px;
  margin-left: 50px;
}

@media only screen and (max-width:880px) {
  /*--gallery slider--*/
  .coverflow img {
    width: 70%;
    margin: auto;
  }
}

@media only screen and (max-width:787px) {
  /*--gallery slider--*/
  .coverflow img {
    width: 50%;
    margin: auto;
  }
}

@media only screen and (max-width:414px) {
  /*--gallery slider--*/
  .coverflow img {
    width: 35%;
    margin: auto;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<div class="slider">
  <section class="coverflow">
    <div class="slide-container">
      <span class="slide-number">01</span>
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
    </div>
    <div class="slide-container">
      <span class="slide-number">02</span>
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
    </div>
    <div class="slide-container">
      <span class="slide-number">03</span>
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
    </div>
    <div class="slide-container">
      <span class="slide-number">04</span>
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
    </div>
    <div class="slide-container">
      <span class="slide-number">05</span>
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
    </div>
    <div class="slide-container">
      <span class="slide-number">06</span>
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
    </div>
  </section>

  <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
    <span class="slider__label sr-only">
      </span>
  </div>
  <!-- end content -->
</div>

我用漂亮的幻灯片库创建了一个滑块。我使用了 CenterPadding 模式，因为我想要那种效果 - 带有中心图像。出于某种原因，我的幻灯片在滑动时略有跳跃。我不确定发生了什么。我认为它来自 CenterPadding。但我需要那种影响，但不确定我现在应该做什么。