如何重新定位 Slick JS 轮播中的点？答案

【问题标题】：How can I reposition the dots in a SlickJS carousel?如何重新定位 Slick JS 轮播中的点？
【发布时间】：2022-02-26 01:42:49
【问题描述】：

在我的项目中，我使用了光滑的滑块插件 (http://kenwheeler.github.io/slick/)。我想知道是否可以重新定位圆点。默认情况下，它们显示在应用了光滑滑块的 div 容器下方。我想在这里实现的是在滑动的 div 块内放置圆点。我可以用箭头来实现这一点，因为我可以用自定义类名来引用它们。
我的 html 如下所示：

<div class="slider-fade">
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
</div>

我的 JS 设置如下所示：

$('.slider-fade').slick({
 autoplay: true,
 autoplaySpeed: 3000,
 infinite: true,
 speed: 500,
 fade: true,
 cssEase: 'linear',
 prevArrow: $('.prev'),
 nextArrow: $('.next'),
 dots: true
});

所以正如我现在提到的，点显示在整个 slider-fade 类下方，但我想得到它，例如，在 text-box 类下方。这可以实现吗？

视觉表示：http://i.stack.imgur.com/jmocB.png

目标是在方块内的箭头下方获得点。

【问题讨论】：

标签： jquery html slider slick.js

【解决方案1】：

您可以在 Slick 设置中使用“appendDots: $(Element)”。它会将点附加到该元素。您可以使用普通 CSS 将该元素放置在任何位置。如果你想要它在幻灯片上，那么你可以在元素上使用绝对或相对定位。

【讨论】：

【解决方案2】：

Slick 在类.slick-dots 的div 中生成圆滑点。该类具有绝对位置。因此，实现您想要的最简单的方法是向该 div 添加样式：

.slick-dots {
  top: 100px;  // play with the number of pixels to position it as you want
  left: 100px; // play with the number of pixels to position it as you want
}

【讨论】：

谢谢。我不知道我为什么要这么努力。
@mori 您可以使用 JSFiddle 打开一个新问题，我会尽力帮助您。如果您这样做，只需在此处放置您的问题的链接
请注意下面 iiR 的回答——对我来说似乎更好
这对我来说不适用于 z-index，并且一些点击/触摸（如箭头）会被点容器拦截。

【解决方案3】：

您也可以只在包装器上使用overflow: hidden（本示例中为滑块淡入淡出）。这样它就会环绕点。

【讨论】：