jQuery 光滑的滑块点重新定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32219819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
slick slider dots repositioning
提问by Chris Birch
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:
在我的项目中，我使用了 slick 滑块插件 ( 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>
My JS settings looks like this:
我的 JS 设置如下所示：
$('.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-fadeclass, but I want to get it, for example, below the text-boxclass. Is this achievable?
所以正如我现在提到的，点显示在整个slider-fade班级下方，但我想得到它，例如，在text-box班级下方。这是可以实现的吗？
Visual representation: http://i.stack.imgur.com/jmocB.png
视觉表示：http: //i.stack.imgur.com/jmocB.png
Aim is to get dots below the arrows inside the block.
目的是在块内的箭头下方获得点。
回答by Asaf David
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 在 class 的 div 内生成光滑的点.slick-dots。该类具有绝对位置。因此，实现您想要的最简单方法是向该 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
}
回答by iiR
You can use "appendDots: $(Element)" in the Slick settings. It will append the dots to that element. You can place that element at any location using normal CSS. If you want it over the slide then you can use absolute or relative positioning on the element.
您可以在 Slick 设置中使用“appendDots: $(Element)”。它将点附加到该元素。您可以使用普通 CSS 将该元素放置在任何位置。如果您希望它在幻灯片上，那么您可以在元素上使用绝对或相对定位。
回答by Thomas VB
You can also just use an overflow: hiddenon the wrapper (slider-fade in this example). This way it will wrap around the dots.
您也可以只overflow: hidden在包装器上使用 an （在本例中为滑块淡入淡出）。这样它就会环绕这些点。
