滑块点重新定位

Question

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

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

Answer 1

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

Answer 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
}