Как правильно доработать логику слайдера?

Question

[LolExtasy]

Код тут
Возникла проблема в логике слайдера. Логика такая: при изменении слайдов нужно отлавливать дата атрибуты и если эти дата атрибуты совпадают с дата атрибутами других блоков то вешать класс на блоки (в редакторе это блоки с красным фоном), вроде как-то работает, но как-то криво.

Comments

[YavaDev]

Вместо slideChange используйте slideChangeTransitionStart

[LolExtasy]

YavaDev, Спасибо!

Answer 1

[0xD34F]

нужно отлавливать дата атрибуты и если эти дата атрибуты совпадают с дата атрибутами других блоков то вешать класс на блоки

Может, не надо никакие атрибуты трогать - учитывая, что порядок значений атрибутов идентичен для слайдов и блоков? Смотрите на индекс:

on: {
  slideChange() {
    const index = this.realIndex;
    document.querySelectorAll('.lol').forEach((n, i) => n.classList.toggle('active', i === index));
  },
},

А вообще, всё это похоже на попытку соорудить собственную пагинацию. Для этого у swiper'а предусмотрены отдельные настройки. Вырезаете из .clients__picture все .lol, вырезаете обработчик slideChange, добавляете

pagination: {
  el: '.clients__picture',
  bulletClass: 'lol',
  bulletActiveClass: 'active',
  renderBullet: (index, className) => `<div class="${className}">${index + 1}</div>`,
},

Comments

[LolExtasy]

Да, действительно. Большое спасибо