光滑的旋转木马移动导航点

Posted 2023-05-07

【中文标题】光滑的旋转木马移动导航点

【英文标题】：Slick carousel moving nav dots

【发布时间】：2016-01-12 09:34:19

【问题描述】：

我正在使用http://kenwheeler.github.io/slick carousel，即使幻灯片超过 8 张，我也需要将点数限制为 8。

导航点应该有左右箭头，提示用户还有更多点要显示。

任何人都可以提出解决方案/在使用 slick 自定义导航点方面有类似的经验吗？

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example

您也可以使用bootstrap 进行此操作

我当前的项目没有使用 bootsrap...

你可以使用 Slider Syncing 的 slick-slider 示例，并将点用作 slider-nav 用于 slider-for，它会为你解决问题。

【参考方案1】：

我想出了一个 solution 来使用 CSS 将点数限制为三个

/* hiding all bullets by default */
.slick-dots li 
    display: none

/* only displaying the active bullets and the 2 bullets next to it */
.slick-dots li.slick-active,
.slick-dots li.slick-active + li,
.slick-dots li.slick-active + li + li 
    display: block;

/* displaying the last three bullets when slick-active class isn't applied to any li before them  */
.slick-dots li:nth-last-child(1),
.slick-dots li:nth-last-child(2),
.slick-dots li:nth-last-child(3) 
    display: block;

/* hiding the last three bullets if slick-active exist before them */
.slick-dots li.slick-active ~ li:nth-last-child(1),
.slick-dots li.slick-active ~ li:nth-last-child(2),
.slick-dots li.slick-active ~ li:nth-last-child(3) 
    display: none;

/* specific conditions to always display the last three bullets */
.slick-dots li.slick-active + li + li:nth-last-child(3),
.slick-dots li.slick-active + li + li:nth-last-child(2),
.slick-dots li.slick-active + li + li:nth-last-child(1),
.slick-dots li.slick-active + li:nth-last-child(3),
.slick-dots li.slick-active + li:nth-last-child(2),
.slick-dots li.slick-active + li:nth-last-child(1)
    display: block;

当然，这可以用预处理器做得很漂亮，但它确实有效。

工作小提琴：http://jsfiddle.net/1gLn1cbg/

【参考方案2】：

我最近开发了类似的东西，您可以将其限制为任意数量的点。我已经完成了 5 个点，之后没有显示额外的点，但是当你的主幻灯片滚动时滚动。

您可以使用 init 和 change 事件来完成此操作。

slickSlider.on('init', function (event, slick)

slickSlider.on('beforeChange', function (event, slick)

工作示例：https://codepen.io/swarad07/pen/xmzQKm

这与 Instagram 的做法非常相似，边缘点的尺寸更小。

【讨论】：

您是否使用 slick.js 来完成这项工作？ github.com/kenwheeler/slick/blob/master/slick/slick.js

?我可以看到您使用了一些来自 slick 的类，但由于没有文档，我不确定。 @Swarad Mokal

所以是的，我确实使用了光滑的类来使其工作。如果您检查代码，它会使用 slick 提供的事件和方法来使逻辑正常工作。

嗨，你的方法很棒。我只是想知道应该更新什么以将蓝色活动点保持在中间（第三个位置）而不是前面。