Slick滑块分页能否隐藏部分页码？自定义样式需求问询

完全可以实现你要的分页样式，核心思路是禁用Slick默认分页，手动生成自定义分页结构，通过逻辑控制页码和省略号的显示，具体步骤如下：

1. 禁用Slick默认分页 #

初始化滑块时关闭默认的点分页，因为我们要自己写分页逻辑：

$('.your-slider').slick({
  dots: false, // 关闭默认分页
  infinite: false, // 非无限滚动，适配固定页码场景
  // 其他滑块配置（比如slidesToShow、slidesToScroll等）
});

2. 添加自定义分页容器 #

在滑块容器附近新增一个用于承载自定义分页的元素：

<div class="custom-slick-pagination"></div>

3. 编写分页生成逻辑 #

通过JavaScript根据当前活跃页码，动态拼接分页HTML，控制省略号和页码的显示规则：

$(document).ready(function(){
  const $slider = $('.your-slider');
  const totalPages = 25; // 总页数
  const $pagination = $('.custom-slick-pagination');

  // 初始化滑块
  $slider.slick({
    dots: false,
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1
  });

  // 生成自定义分页HTML
  function renderPagination(currentPage) {
    let html = '<button class="slick-prev">‹</button>';

    // 固定显示第一页
    html += `<button class="page-btn ${currentPage === 1 ? 'active' : ''}" data-page="1">1</button>`;

    // 前省略号：当前页大于4时显示（避免和第一页、中间页码重复）
    if (currentPage > 4) {
      html += '<span class="ellipsis">...</span>';
    }

    // 显示当前页附近的3个连续页码
    const start = Math.max(2, currentPage - 1);
    const end = Math.min(totalPages - 1, currentPage + 1);
    for (let i = start; i <= end; i++) {
      html += `<button class="page-btn ${currentPage === i ? 'active' : ''}" data-page="${i}">${i}</button>`;
    }

    // 后省略号：当前页小于22时显示（25-3=22，避免和最后一页、中间页码重复）
    if (currentPage < totalPages - 3) {
      html += '<span class="ellipsis">...</span>';
    }

    // 固定显示最后一页
    html += `<button class="page-btn ${currentPage === totalPages ? 'active' : ''}" data-page="${totalPages}">${totalPages}</button>`;
    html += '<button class="slick-next">›</button>';

    $pagination.html(html);
  }

  // 初始渲染第一页分页
  renderPagination(1);

  // 滑块切换后更新分页
  $slider.on('afterChange', (e, slick, currentSlide) => {
    const currentPage = currentSlide + 1; // Slick的slide索引从0开始，转成页码
    renderPagination(currentPage);
  });

  // 绑定分页按钮点击事件
  $pagination.on('click', '.page-btn', function(){
    const targetPage = parseInt($(this).data('page'));
    $slider.slick('slickGoTo', targetPage - 1);
  });

  // 绑定前后箭头点击事件
  $pagination.on('click', '.slick-prev', () => $slider.slick('slickPrev'));
  $pagination.on('click', '.slick-next', () => $slider.slick('slickNext'));
});

4. 添加CSS美化样式 #

给自定义分页添加基础样式，适配移动端显示：

.custom-slick-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.page-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.page-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.ellipsis {
  color: #999;
  font-size: 14px;
  padding: 0 4px;
}

.slick-prev, .slick-next {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #2563eb;
}

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