在我的项目中,我使用了灵活的 slider 插件 ( http://kenwheeler.github.io/slick/ )。我想知道是否可以重新定位圆点。默认情况下,它们显示在应用了光滑 slider 的 div 容器下方。我在这里想要实现的是在滑动的 div block 中放置光滑的点。我用箭头实现这个没有问题,因为我可以用自定义类名来引用它们。
我的 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
目标是在 block 内的箭头下方获取点。
最佳答案
Slick 在类为 .slick-dots
的 div 中生成圆点。那个类(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
}
关于jquery - 如何重新定位 SlickJS 轮播中的点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32219819/