Как в слайдере вывести количество точек отличное от количества слайдов?

Question

[malayamarisha]

Всем привет.
Есть слайдер (8 слайдов), в котором внизу есть точки для переключения (8 точек).
Как при наличии 8 слайдов вывести 6 точек?
Точкам при активности слайда добавляется .w-active

Точки:

<div class="side-nav w-slider-nav w-round">
<div class="w-slider-dot"></div>
<div class="w-slider-dot w-active"></div>
<div class="w-slider-dot"></div>
<div class="w-slider-dot"></div>
<div class="w-slider-dot"></div>
<div class="w-slider-dot"></div>
<div class="w-slider-dot"></div>
</div>

Есть вариант точки вынести в отдельный блок (slider-line), скрыть точки, которые не входят в блок и смещать по одной точке при смене слайда.

Пробую в side-nav w-slider-nav w-round добавить блок slider-line и в него перенести точки, но в итоге блок slider-line пустой.

Answer 1

[Сергей delphinpro]

У любого уважающего себя слайдера есть событие смены слайда, и в нем обычно можно получить индекс активного слайда. Будем плясать от этого.
Точки не обязательно смещать. Нужно просто разместить их по центру и прятать лишние. Таким образом активная точка всегда будет видна, и даже по центру (если не вначале/конце списка).

Вот, я накидал пример, как оно может быть реализовано.
Я не стал реальный слайдер вставлять, просто показал принцип. Функция update() – это как раз обработчик события смены слайда. Переменная visible - то, сколько точек вы хотите сделать видимыми.

Comments

[malayamarisha]

Спасибо большое за развернутый ответ и предоставленный код, как раз то что нужно

// Show dots of given amount
    const dotsVisible = 6;
    const dotsContainer = document.querySelector('.w-slider-nav');
    const sideVisible = Math.floor(dotsVisible / 2);
    let startFlipping = data.index > sideVisible ? data.index - sideVisible : 0;
    let endFlipping = startFlipping + dotsVisible - 1;
    if (endFlipping >= data.pages) {
      startFlipping = data.pages - dotsVisible;
    }
    [...dotsContainer.querySelectorAll('.w-slider-dot')]
      .forEach((dot, index) => {
          dot.classList.toggle('w-hidden', index < startFlipping || index > endFlipping);
      });

Answer 2

[imko]

.w-slider-dot:nth-child(7),
.w-slider-dot:nth-child(8) {
	display: none;
}

Comments

[malayamarisha]

Спасибо, для определенного количества слайдов самое то
Вот только у меня n слайдов) И при пролистывании слайдера активная точка не видна, тк скрыты все последующие.
Именно для того, чтобы вместе со слайдом двигались точки пытаюсь точки вынести в отдельный блок и смещать точки на px равное ширине точки. Пока безрезультатно.

[Антон Литвиненко]

malayamarisha, можно получить две последние с конца

[malayamarisha]

Антон Литвиненко, спасибо за идею )
Возможно, не совсем понимаю, как сделать последние 2 с конца )
Пример, есть слайдер и у него 8 слайдов, тогда да, 2 с конца подходит и будет выводиться 6 точек. Но если у меня 20 слайдов и нужно вывести только 6 точек, то как быть?

[Антон Литвиненко]

malayamarisha, я не до концп опнимаю что вы делаете, но можно все скрыть а открыть первых 6

[Антон Литвиненко]

malayamarisha,
https://developer.mozilla.org/ru/docs/Web/CSS/:nth...

[malayamarisha]

Антон Литвиненко,
Есть блок, в котором выводятся точки слайдера:

data.nav = $el.children(data.sliderNavClass ? data.sliderNavClass: '.w-slider-nav');

Точки добавляются на страницу след образом: data.nav.empty().append(dots);
Пытаюсь добавить точки в блок slider-line<div class="slider-line"></div>, для того, чтобы скрыть точки, которые не вмещаются в размер блока. И при пролистывании слайдера эти точки тоже будут листаться. Но пока не выходит.
Точки в блок пытаюсь добавить так:

var sliderLineTest = document.querySelector('.slider-line')
    data.nav.append(slider-line);

[imko]

malayamarisha, так может тебе просто сделать точки инлайновыми, а родителю ограничить перепролнение текста?