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

Question

在我的项目中，我正在使用slick slider插件（http://kenwheeler.github.io/slick/）。我想知道是否可以重新定位slick dots。默认情况下，它们显示在 slick slider 应用的 div 容器下方。我想要实现的是将slick dots放置在滑动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

Answer 1

Slick会在一个带有class属性为.slick-dots的div内生成slick dots（轮播图的小圆点）。该class属性拥有绝对定位。因此，实现您想要的最简单的方法是向该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

---

谢谢。我不知道为什么我要用困难的方式尝试这个。 - Chris Birch

@mori，您可以打开一个新的问题，并在JSFiddle中提供链接，我会在那里帮助您。如果您这样做了，请在此处放置您的问题链接。 - Asaf David

请注意下面iiR的回答 - 在我看来它更好。 - tog22

这对我和一些点击/触摸（例如箭头）与z-index不兼容，会被点容器拦截。 - jalone

Answer 2

在Slick的设置中，你可以使用"appendDots:$(Element)"。这将把点添加到该元素中。 你可以使用常规的CSS将该元素放置在任何位置。 如果你想在幻灯片上方显示它，那么可以在元素上使用绝对或相对定位。

- iiR

Answer 3

你也可以在包装器（例如 slider-fade）上使用 overflow: hidden，这样它就会围绕着点进行包装。

- Thomas VB