我如何重新定位SlickJS旋转木马中的点?
在我的项目中,我使用了滑块插件(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
}
相关文章