Slick.js自定义箭头与指示器定位问题：按钮放容器内失效、上一张按钮错位

问题根因 #

• 轮播容器未设置相对定位：自定义箭头用了绝对定位，但父容器.sliding-announcement没有加position: relative，导致箭头相对于整个文档流定位，出现错位、点击区域异常的问题。
• 箭头样式逻辑错误：上一张按钮（prev-arrow）错误设置了right: 10px和height: 100%，正常上一张按钮应该放在左侧用left属性，且高度和下一张按钮统一设为0，避免撑高布局。
• 层级缺失：箭头没有设置高于轮播图片的z-index，容易被图片遮挡导致点击无响应。
• 冗余参数影响：开启了variableWidth但未给轮播子项设置固定宽度，会干扰Slick的布局计算。

修复方案 #

1. 修改JS配置 #

关闭不需要的variableWidth参数即可，其余配置保留：

$('.sliding-announcement').slick({
    dots: true,
    infinite: true,
    speed: 100,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: true,
    variableWidth: false,
    prevArrow: '<button class="button-slider slide-arrow prev-arrow"></button>',
    nextArrow: '<button class="button-slider slide-arrow next-arrow"></button>',
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });

2. 修改CSS样式 #

补充父容器定位，修正箭头的位置、高度、层级属性：

/* 新增轮播容器相对定位，作为箭头绝对定位的父级 */
.sliding-announcement {
  position: relative;
  overflow: hidden;
}
.button-slider{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.slide-arrow{
  position: absolute;
  top: 50%;
  margin-top: -15px;
  z-index: 10;
  cursor: pointer;
}
.prev-arrow{
    background: red;
  left: 10px;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 15px solid #113463;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.next-arrow{
    background: red;
  right: 10px;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: 15px solid #113463;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
/* 调整分页器位置到轮播内部 */
.slick-dots {
  position: absolute;
  bottom: 10px;
  z-index: 10;
}

3. HTML部分无需修改 #

Slick默认会把自定义箭头、分页器自动插入到.sliding-announcement容器内部，不需要额外配置容器选择器。

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