Ограничение точек на скользящем слайдере (NO JQUERY) - PullRequest
Новая
       18

Ограничение точек на скользящем слайдере (NO JQUERY)

0 голосов
/ 27 апреля 2020

Если мой слайдер содержит более 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

Возможно ли перевести это на js?

1 Ответ

0 голосов
/ 27 апреля 2020

Это - самое близкое, что я могу получить, не тратя на это в реальном времени. По сути, все, что вам нужно, это несколько ванильных JavaScript замен для jQuery. Этого должно быть достаточно для начала работы.

  1. Замените $(element).remove() и $(element).add() на classList альтернатива
  2. Обнаружение индекса узла .slick-active с Array.from(element.parentNode.children).indexOf(element)
  3. Цикл по массиву элементов .slick-dots li для выборочного применения классов в зависимости от отношения каждого к индексу активной точки.
...