光滑的滑块点重新定位 [英] slick slider dots repositioning
问题描述
在我的项目中,我使用滑动滑块插件( http://kenwheeler.github.io/slick/ )。我想知道是否可以重新定位光滑点。默认情况下,它们显示在应用了滑动滑块的div容器下面。我想在这里实现的是在滑动div块内放置光滑的点。我用箭头实现这一点没有问题,因为我可以用自定义类名称来引用它们。
我的html看起来像这样:
< div class =滑块褪色>
< div>
< div class =text-box>
< h2> Lorem ipsum< / h2>
...附加文本
< / div>
< / div>
< div>
< div class =text-box>
< h2> Lorem ipsum< / h2>
...附加文本
< / div>
< / div>
< div>
< div class =text-box>
< h2> Lorem ipsum< / h2>
...附加文本
< / div>
< / div>
< / div>
我的JS设置如下所示:
$ b $ (
自动播放:真实,
自动播放速度:3000,
无限:真,
速度:500,
fade:true,
cssEase:'linear',
prevArrow:$('。prev'),
nextArrow:$('。下一个'),
dots:true
});
因此,正如我所提到的,现在点显示在整个下方slider-fade
类,但是我想获得它,例如,在文本框
类下面。这是可以实现的吗?
可视化表示: http ://i.stack.imgur.com/jmocB.png
目标是让点在块内的箭头下方。
$ blick在类中使用class .slick-dots
生成一个圆滑的圆点。那个班有绝对的位置。所以最简单的方法来实现你想要的是添加样式到该div: .slick-dots {
top:100px; //使用像素数来放置它,因为你需要
left:100px; //使用像素数来放置它,如你所想
}
In my project I'm using slick slider plugin ( http://kenwheeler.github.io/slick/ ). I was wondering if it is possible to reposition slick dots. As default they are displayed below the div container for which slick slider is applied. What I want to achieve here is to put slick dots inside the sliding div blocks. I had no problem to achieve this with arrows as I can refer to them with custom class names.
My html looks like this:
<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>
My JS settings looks like this:
$('.slider-fade').slick({
autoplay: true,
autoplaySpeed: 3000,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
prevArrow: $('.prev'),
nextArrow: $('.next'),
dots: true
});
So as I mentioned now dots are displayed below the whole slider-fade
class, but I want to get it, for example, below the text-box
class. Is this achievable?
Visual representation: http://i.stack.imgur.com/jmocB.png
Aim is to get dots below the arrows inside the block.
Slick generates the slick dots inside a div with class .slick-dots
. That class has an absolute position. So the easiest way to achieve what you want is to add styling to that 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
}
这篇关于光滑的滑块点重新定位的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!