Slick Slider实现Instagram风格分页圆点（最多显示6个）

我刚好做过类似的需求，完全可以实现！核心思路是自定义分页模板，再通过JS动态控制圆点的显示/隐藏，确保始终最多显示6个且第一个圆点固定显示。下面是具体的实现步骤：

1. 基础设置与初始化 #

首先，我们需要禁用Slick默认的分页生成，改用自定义的分页容器，这样能完全控制圆点的结构：

<!-- 滑块容器 -->
<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <!-- 这里放你的所有轮播项 -->
</div>
<!-- 自定义分页容器 -->
<div class="custom-pagination"></div>

初始化Slick时，关闭默认圆点，指定自定义分页的生成规则：

$('.slider').slick({
  dots: false, // 禁用默认圆点
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: false, // 如果是无限轮播，逻辑需要调整，这里先按有限轮播处理
  appendDots: $('.custom-pagination'),
  customPaging: function(slider, index) {
    // 生成带索引标记的圆点按钮
    return `<button class="dot" data-index="${index}"></button>`;
  }
});

2. 核心逻辑：动态控制圆点显示 #

编写一个函数，根据当前激活的滑块位置，计算需要显示的圆点范围，始终保留第一个圆点，同时保证最多显示6个：

function updatePagination() {
  const slider = $('.slider').slick('getSlick');
  const totalSlides = slider.slideCount;
  const currentIndex = slider.currentSlide;
  const $dots = $('.custom-pagination .dot');

  // 先隐藏所有圆点
  $dots.hide();
  // 始终显示第一个圆点
  $dots.eq(0).show();

  // 如果总轮播数≤6，直接显示所有圆点
  if (totalSlides <= 6) {
    $dots.show();
    $dots.removeClass('slick-active').eq(currentIndex).addClass('slick-active');
    return;
  }

  let start, end;
  // 情况1：当前激活点在前4个，显示前6个（包括第一个）
  if (currentIndex <= 3) {
    start = 1;
    end = 5;
  } 
  // 情况2：当前激活点在后4个，显示最后5个+第一个
  else if (currentIndex >= totalSlides - 4) {
    start = totalSlides - 5;
    end = totalSlides - 1;
  } 
  // 情况3：中间位置，显示激活点前后各2个+第一个
  else {
    start = currentIndex - 2;
    end = currentIndex + 2;
  }

  // 显示范围内的圆点
  for (let i = start; i <= end; i++) {
    if (i !== 0) $dots.eq(i).show();
  }

  // 更新激活状态
  $dots.removeClass('slick-active').eq(currentIndex).addClass('slick-active');
}

然后在滑块初始化和切换时触发这个函数：

$('.slider').on('init afterChange', updatePagination);

3. 补充交互与样式 #

给圆点添加点击切换的功能：

$('.custom-pagination').on('click', '.dot', function() {
  const targetIndex = $(this).data('index');
  $('.slider').slick('slickGoTo', targetIndex);
});

最后加上CSS样式，还原Instagram的圆点风格：

.custom-pagination {
  text-align: center;
  margin-top: 1.5rem;
}

.dot {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 50%;
  background-color: #e0e0e0;
  margin: 0 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dot.slick-active {
  background-color: #232323; /* 激活圆点的颜色，可自定义 */
}

.dot:focus {
  outline: none;
}

说明 #

• 如果你的滑块是无限轮播（infinite: true），需要额外处理循环后的索引计算，比如把currentIndex转换成实际的索引值。
• 你可以根据需求调整显示的圆点数量（比如把前后2个改成1个，这样总显示数是4个+第一个=5个），只需要修改start和end的计算逻辑即可。

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