Slick Slider轮播按钮定位及宽高溢出设置问题咨询

优化方案 #

一、轮播控制按钮定位问题修复 #

你当前的按钮定位冲突是核心问题：[type="button"] 规则里设置了position: fixed，后续给.slick-prev/.slick-next设置的position: absolute优先级低于前者，导致定位逻辑混乱，且滑块父容器没有设置相对定位，绝对定位的按钮会相对于整个文档流定位，而非滑块区域。
具体修改步骤：

• 给.slider新增规则：position: relative;，让按钮的绝对定位以滑块区域为基准
• 删除[type="button"]里的position: fixed声明，保留position: absolute即可
• 如果需要按钮放在滑块区域外侧不遮挡图片，可以调整left/right值，比如left: -90px、right: -90px，适配按钮自身70px的宽度加边距

二、宽高溢出逻辑优化 #

你当前的实现存在三处不合理：全局禁用body滚动、图片尺寸写死不响应、容器溢出规则设置错误，对应修改如下：

1. 移除body上的overflow: hidden声明，全局禁用滚动会导致其他页面内容无法正常查看，仅需要滑块区域不溢出的话，.slick-list自带的overflow: hidden已经足够
2. 调整图片尺寸为响应式：把.slick-slide img里的固定width: 400px改为max-width: 100%，同时可以用aspect-ratio: 2/1固定图片宽高比，替代冗余的height: 100vh+max-height: 80vh设置，适配不同尺寸的屏幕
3. 如果设计要求右侧轮播要超出Bootstrap的col-md-8容器宽度、撑到屏幕右侧，可以给.col-md-8新增规则：position: relative; overflow: visible;，再给.slider设置width: calc(100% + 12vw); margin-right: -12vw;，就能自然实现容器外扩效果，不会出现异常横向滚动条

关键修改代码参考 #

/* 新增滑块相对定位 */
.slider {
  display: flex;
  position: relative;
}
/* 移除按钮fixed定位 */
[type="button"] {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border: 0;
  text-indent: -9999px;
  background-color: black;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: 0.9;
  transform: translateY(-50%);
  transition: all 0.25s ease;
}
/* 调整按钮外侧定位 */
.slick-prev {
  left: -80px;
}
.slick-next {
  right: -80px;
}
/* 图片响应式调整 */
.slick-slide img {
  max-width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
/* 移除body的overflow: hidden */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fff;
}

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