如何重新定位 SlickJS 轮播中的点？

Question

在我的项目中，我使用了 slick 滑块插件 ( 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

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

原文由 Chris Birch 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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
}

原文由 Asaf David 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 iiR 发布，翻译遵循 CC BY-SA 3.0 许可协议