光滑滑块上的限制点（无问题）

Question

如果我的滑块包含30-40张以上的图像，则点将不断累加，形成多条线。我的目标是获得类似instagram点导航的功能。当您单击一个点并在中间激活新激活的点时，您会收到正确的图像。我知道光滑滑块可以选择使用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

是否可以将其翻译为js？

Answer 1

This是我可以得到的最接近的信息，而无需花费大量时间。基本上，您需要的是jQuery的一些普通JavaScript替代品。这应该足以让您入门。

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