【问题标题】: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,它会为你解决问题。

标签: javascript jquery css carousel slick.js


【解决方案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 提供的事件和方法来使逻辑正常工作。
    • 嗨,你的方法很棒。我只是想知道应该更新什么以将蓝色活动点保持在中间(第三个位置)而不是前面。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-09-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-19
    • 1970-01-01
    相关资源
    最近更新 更多