我如何重新定位SlickJS旋转木马中的点？ [英] How can I reposition the dots in a SlickJS carousel?

问题描述

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

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

推荐答案

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
}

这篇关于我如何重新定位SlickJS旋转木马中的点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！