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在类.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
}

Answer 2

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

Answer 3

您也可以在包装器上使用overflow: hidden（此示例中为slider-fade）。这样它就会包围点。

光滑的滑块重新定位

3 个答案: