限制光滑滑块上的点（无 jQuery）答案

【问题标题】：Limit Dots on slick-slider (No jQuery)限制光滑滑块上的点（无 jQuery）
【发布时间】：2020-04-27 15:38:27
【问题描述】：

如果我的滑块包含超过 30-40 个图像，这些点会不断加起来形成多条线。我的目标是获得类似 instagram 点导航的东西。当您单击一个点时，您会收到正确的图像，而新激活的活动点会在中间滑动。

我知道 slick-slider 可以选择 slidesToScroll 来划分图像（块滚动而不是 1 比 1），这实际上可以减少您的点，但对移动设备没有帮助。

jQuery 不包含在项目中，所以我想查看此请求的一些 JS 或 JSX 结果。

这是我想要的示例

https://codepen.io/nazarkomar/pen/RdRjqJ

$(document).ready(function() {

    var slider = $('.main-slider');

    slider.slick({
        dots: true
    });

    function loadSliderDotClasses(stickSlider) {

        var dot = stickSlider.find('.slick-dots li.slick-active'),
        dotSize1 = 'dot-size-1',
        dotSize2 = 'dot-size-2',
        dotSize3 = 'dot-size-3';

        stickSlider.find('.slick-dots li').each(function() {
            $(this).removeClass(dotSize1).removeClass(dotSize2).removeClass(dotSize3);
        });

        dot.prev().prev().prev().addClass(dotSize1);
        dot.prev().prev().addClass(dotSize2);
        dot.prev().addClass(dotSize3);
        dot.next().addClass(dotSize3);
        dot.next().next().addClass(dotSize2);
        dot.next().next().next().addClass(dotSize1);
    }

    loadSliderDotClasses(slider);

    slider.find('.slick-dots li').on('click', function() {
        loadSliderDotClasses(slider);
    });

    slider.on('swipe', function(event, slick, direction){
        loadSliderDotClasses(slider);
    });
});

https://codepen.io/nazarkomar/pen/RdRjqJ

是否可以将其转换为 JavaScript？

【问题讨论】：

当然有可能，jQuery 就是 JavaScript。但我只见过带有 jQuery 依赖项的 Slick。您正在使用的不需要 jQuery？你可以在你的问题中链接它吗？
@emsoff 与 Yarn / NPM。是的，我也是这么想的。

标签： javascript css animation jsx slick.js

【解决方案1】：

This 是我不用花时间就能得到的最接近的结果。基本上，您需要的只是 jQuery 的一些原生 JavaScript 替代品。这应该足以让您入门。

用classList替代替换$(element).remove()和$(element).add()
使用Array.from(element.parentNode.children).indexOf(element) 检测.slick-active 节点的索引
循环遍历.slick-dots li 元素数组以选择性地应用类，具体取决于每个类与活动点的索引的关系。

【讨论】：