Question

我使用光滑的滑块（http://kenwheeler.github.io/slick/）。我想知道是否有可能只为特定的光滑滑块重新定位光滑的点（通过＆＃34;滑块＆＃34;我的意思是完整的滑块，而不是滑块中的图像。我的页面上有3个光滑的幻灯片，只是想要为其中一个移动它。）

我发现此帖slick slider dots repositioning重新定位，只要您想移动所有点（所有滑块在一起），接受的解决方案就可以正常工作：

＆＃13;

.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
}

＆＃13;

如何仅为特定滑块重新定位点？ .slick-dots类似乎适用于所有滑块，源代码在CDN中。

有关代码参考，请参阅此小提琴https://jsfiddle.net/5ox31m2a/89/（请注意，这只是1个滑块的示例，而不是手头问题的完整表示。）

提前致谢

Answer 1

首先，您应该使用更新版本的插件，当前版本为1.8.1

然后，您可以使用afterChange事件在元素上设置一个不同的属性，您可以使用CSS将其作为样式进行定位。

例如，

$('.slider').on('afterChange',function(e, slick, currentSlide){
    slick.$dots.attr('data-current-slide', currentSlide);
});

上面将设置一个名为data-current-slide的属性，其值与当前幻灯片相匹配。现在，您可以使用带有[data-current-slide="XX"]的CSS来定位它以进行样式设置。

例如使用

.slick-dots[data-current-slide="3"]{
    bottom: -20px;
}

当你在幻灯片3上时，

会移动照片下面的点。
注意：当前幻灯片取决于您使用slidesToScroll选项

的方式

请参阅https://jsfiddle.net/gaby/1hoztaay/

上的演示

光滑的滑块点重新定位 - 多个位置

1 个答案: