Slick Slider如何将切换点置于上一页与下一页按钮之间？

当然可以实现！不用只靠CSS硬定位，我们可以通过调整Slick的初始化配置+DOM操作，或者完全自定义控件结构来达成需求。我给你两种靠谱的方案：

方案一：调整Slick默认生成的控件结构 #

这个方案适合不想完全重写控件的场景，利用Slick的事件回调来调整DOM布局：

步骤1：初始化Slick并保留默认控件 #

先让Slick生成prev/next按钮和dots，我们后续再调整它们的位置：

$('.slider').slick({
  dots: true,
  prevArrow: '<button class="slick-prev">← 上一页</button>',
  nextArrow: '<button class="slick-next">下一页 →</button>',
  // 其他滑块配置（比如autoplay、slidesToShow等）
});

步骤2：初始化完成后重组DOM结构 #

监听Slick的init事件，在滑块初始化完成后，把dots移到prev和next按钮之间，并用一个容器包裹起来：

$('.slider').on('init', function() {
  // 获取三个控件元素
  const $prevBtn = $('.slick-prev');
  const $nextBtn = $('.slick-next');
  const $dots = $('.slick-dots');

  // 创建统一的控件容器
  const $controlsWrapper = $('<div class="slick-controls-wrapper"></div>');

  // 按顺序把控件放进容器
  $controlsWrapper.append($prevBtn).append($dots).append($nextBtn);

  // 把容器添加到滑块的父元素中（位置可以根据你的布局调整）
  $(this).parent().append($controlsWrapper);
});

步骤3：处理滑块更新的情况 #

如果滑块后续有动态添加/删除slide的操作，Slick会重新生成dots，所以要监听reInit事件，重新调整结构：

$('.slider').on('reInit', function() {
  const $controlsWrapper = $('.slick-controls-wrapper');
  $controlsWrapper.empty(); // 清空旧内容

  const $prevBtn = $('.slick-prev');
  const $nextBtn = $('.slick-next');
  const $dots = $('.slick-dots');

  $controlsWrapper.append($prevBtn).append($dots).append($nextBtn);
});

步骤4：添加CSS让控件横向排列 #

最后给容器加个flex布局，让三个元素按顺序横向展示：

.slick-controls-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* 调整控件之间的间距 */
  margin-top: 15px;
}

/* 去掉dots默认的margin，避免布局错乱 */
.slick-dots {
  margin: 0;
}

方案二：完全自定义控件结构（更灵活） #

如果想要完全掌控控件的HTML结构，推荐直接禁用Slick的默认控件，自己手动实现：

步骤1：初始化Slick时禁用所有默认控件 #

const $slider = $('.slider').slick({
  dots: false,
  prevArrow: false,
  nextArrow: false,
  // 其他滑块配置
});

步骤2：手动编写自定义控件的HTML #

直接在页面中写出你想要的结构：

<div class="custom-slider-controls">
  <button class="custom-prev">← 上一页</button>
  <div class="custom-dots"></div>
  <button class="custom-next">下一页 →</button>
</div>

步骤3：编写JS逻辑绑定控件功能 #

自己生成dots，并给按钮和dots绑定滑块控制事件：

// 生成dots的函数
function renderCustomDots() {
  const slideTotal = $slider.slick('getSlick').slideCount;
  const currentSlide = $slider.slick('slickCurrentSlide');
  const $dotsContainer = $('.custom-dots');
  
  $dotsContainer.empty(); // 清空旧dots

  for (let i = 0; i < slideTotal; i++) {
    const $dot = $('<button class="custom-dot"></button>');
    // 给当前激活的slide对应的dot加active类
    if (i === currentSlide) $dot.addClass('active');
    
    // 绑定点击跳转事件
    $dot.on('click', () => $slider.slick('slickGoTo', i));
    $dotsContainer.append($dot);
  }
}

// 初始化时生成dots
renderCustomDots();

// 绑定prev/next按钮事件
$('.custom-prev').on('click', () => $slider.slick('slickPrev'));
$('.custom-next').on('click', () => $slider.slick('slickNext'));

// 滑块切换后更新dots的激活状态
$slider.on('afterChange', (_, slick, currentSlide) => {
  $('.custom-dot').removeClass('active');
  $('.custom-dot').eq(currentSlide).addClass('active');
});

// 滑块重新初始化时（比如动态修改slide）重新生成dots
$slider.on('reInit', renderCustomDots);

步骤4：添加CSS美化控件 #

根据你的需求自定义样式即可，比如：

.custom-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.custom-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #ddd;
  margin: 0 4px;
  cursor: pointer;
}

.custom-dot.active {
  background: #2c3e50; /* 激活状态的颜色 */
}

这两种方案都能实现把dots放在prev和next按钮之间的布局，而且都是通过调整HTML结构实现的，不是单纯靠CSS定位哦～

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