如何修复Slick轮播centerMode：幻灯片数量不足6时无法居中问题

问题说明 #

当导航幻灯片数量超过6个时，centerMode功能正常；但数量少于6个时，幻灯片无法正确居中。需要通过JS动态调整，要么让centerMode在少数量时仍正常工作，要么直接禁用该功能。

解决方案 #

通过检测导航滑块的子元素数量，动态配置Slick参数：

• 幻灯片数量≥6：保留原centerMode配置
• 幻灯片数量<6：提供两种适配方案

方案1：数量不足时禁用centerMode

动态关闭centerMode并取消内边距，让幻灯片左对齐铺满容器：

$(function() {
  $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });
  
  const slideCount = $('.slider-nav').children().length;
  const useCenterMode = slideCount >= 6;
  let slidesToShow = 5;

  // 调整显示的幻灯片数量
  if (!useCenterMode) {
    slidesToShow = slideCount;
  } else if (slidesToShow > slideCount - 1) {
    slidesToShow = slideCount - 1;
  }
  
  $('.slider-nav').slick({
    slidesToShow: slidesToShow,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    centerMode: useCenterMode,
    centerPadding: useCenterMode ? '70px' : '0',
    focusOnSelect: true,
    variableWidth: false,
    rows: 0,
    responsive: [
      {
        breakpoint: 992,
        settings: {
          slidesToShow: useCenterMode ? 3 : slideCount,
          centerMode: useCenterMode,
          centerPadding: useCenterMode ? '70px' : '0'
        }
      },
      {
        breakpoint: 576,
        settings: {
          slidesToShow: 1,
          centerMode: true,
          centerPadding: '70px'
        }
      }
    ]
  });
});

方案2：数量不足时保持centerMode并居中

调整slidesToShow为1，确保少量幻灯片仍能居中显示：

$(function() {
  $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });
  
  const slideCount = $('.slider-nav').children().length;
  let slidesToShow = 5;

  if (slideCount < 6) {
    slidesToShow = 1;
  } else if (slidesToShow > slideCount - 1) {
    slidesToShow = slideCount - 1;
  }
  
  $('.slider-nav').slick({
    slidesToShow: slidesToShow,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    centerMode: true,
    centerPadding: '70px',
    focusOnSelect: true,
    variableWidth: false,
    rows: 0,
    responsive: [
      {
        breakpoint: 992,
        settings: {
          slidesToShow: slideCount <6 ? 1 :3,
        }
      },
      {
        breakpoint: 576,
        settings: {
          slidesToShow: 1,
        }
      }
    ]
  });
});

完整配套代码 #

CSS

img {
  max-width: 100%;
  height: auto;
}

.slider-style-for {
  & img {
    width: 100%;
  }
}

.slider-style-nav {
  & .slider-nav__items {
    width: 260px;
  }
  & .slick-next {
    right: 0;
  }
  & .slick-prev {
    left: 0;
  }
  & .slick-next:before, 
  & .slick-prev:before {
    color: black;
  }
}

div[aria-hidden="true"] img {
  opacity: .3;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="slider slider-for slider-style-for">
        <div>
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </div>
        <div>
           <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </div>
        <div>
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </div>
        <div>
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </div>
        <div>
          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
        </div>
      </div>
      
      <div class="slider slider-nav slider-style-nav">
        <div class="m-2 slider-nav__items">
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </div>
        <div class="m-2 slider-nav__items">
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </div>
        <div class="m-2 slider-nav__items">
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </div>
        <div class="m-2 slider-nav__items">
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </div>
        <div class="m-2 slider-nav__items">
          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
        </div>
      </div>
    </div>
  </div>
</div>

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