Slick JS如何调整激活项位置：设为第二个居中项

我用Slick JS时碰到个问题：想把导航滑块的激活项设置为行内第二个居中显示，但它默认自动居中在第三个位置。

当前使用代码 #

jQuery(document).ready(function($) {
  $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: true,
    asNavFor: '.slider-nav',
    centerMode: true,

    responsive: [{
      breakpoint: 800,
      settings: {
        arrows: false,
      },
    }, ]
  });
  $('.slider-nav').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    arrows: false,
    centerMode: true,
    focusOnSelect: true,
    variableWidth: false,
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 1000,
    
    responsive: [{
      breakpoint: 800,
      settings: {
        slidesToShow: 1,
      },
    }, ]
  });
})

我在网上找了各种解决方案，试了都没用🥺

测试代码示例 #

HTML #

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

<div class="sld-wrp">
  <div class="slider-for">
    <div class="slide-container">go 1</div>
    <div class="slide-container">go 2</div>
    <div class="slide-container">go 3</div>
    <div class="slide-container">go 4</div>
    <div class="slide-container">go 5</div>
    <div class="slide-container">go 6</div>
  </div>
  
  <div class="slider-nav">
    <div class="slide-btn">go 1</div>
    <div class="slide-btn">go 2</div>
    <div class="slide-btn">go 3</div>
    <div class="slide-btn">go 4</div>
    <div class="slide-btn">go 5</div>
    <div class="slide-btn">go 6</div>
  </div>
</div>

CSS #

body {
  background-color: #ccc;
  margin: 0;
  padding: 0;
}

.sld-wrp {
  width: 800px;
  margin: 0 auto;
}

.slider-for {
  width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.slide-container {
  background-color: #fff;
  text-align: center;
  display: flex;
  line-height: 40vh;
  font-size: 40px;
  font-weight: bold;
  border: 1px solid #000;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.slide-btn {
  text-align: center;
  box-sizing: border-box;
  padding: 20px 0;
  background-color: yellow;
  border: 1px solid #000;
  cursor: pointer;
}

.slide-btn:hover {
  background-color: rgb(255, 179, 0);
}

.slick-current .slide-btn {
  padding: 40px;
}

.slick-list {
  padding: 0px !important;
}

JavaScript #

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

$('.slider-nav').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  initialSlide: 0,
  dots: false,
  arrows: true,
  infinite: true,
  centerMode: true,
  focusOnSelect: true,
  variableWidth: false,
});

内容的提问来源于stack exchange，提问作者Sonkin