时间戳

首页 > 解决方案 > 限制光滑滑块上的点（无 jQuery）

javascript - 限制光滑滑块上的点（无 jQuery）

问题描述

如果我的滑块包含超过 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？

标签： javascriptcssanimationjsxslick.js

解决方案

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

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

推荐阅读