Как написать функцию при смене класса элемента?

Question

[voyager-studio]

Всем привет!
Есть такая разметка, где item - элемент слайдера, которому добавляется класс center во время пролистывания слайдера, а tab__item - это элемент табов, которому нужно добавить класс active, когда у элемента item есть класс center:

<div class="container">
  <div class="item center" data-tab="#tab1"></div>
  <div class="item" data-tab="#tab2"></div>
  <div class="item" data-tab="#tab3"></div>
  <div class="item" data-tab="#tab4"></div>
  <div class="item" data-tab="#tab5"></div>
</div>

<div class="container">
  <div class="tab__item" id="tab1"></div>
  <div class="tab__item" id="tab2"></div>
  <div class="tab__item" id="tab3"></div>
  <div class="tab__item" id="tab4"></div>
  <div class="tab__item" id="tab5"></div>
</div>

В реальном проекте при открытии центрального слайда нужно показать текст таба, который связан с ним через data-атрибут. Проблема в том, что событие должно происходить не по клику, а автоматически при появлении класса center у элемента item слайдера

Answer 1

[Василий Банников]

а автоматически при появлении класса center у элемента item слайдера

Может добавить этот код в ту функцию, которая этот класс добавляет? Не сам же по себе он возникает

Comments

[voyager-studio]

его добавляет swiper. Не могу сообразить как правильно сделать, чтобы показывался определенный таб, когда активный слайд с классом swiper-center

[StiflerProger]

voyager-studio, напиши обработчик события "slideChange" https://swiperjs.com/swiper-api#events

[Василий Банников]

voyager-studio, у слайдера же есть какое-то api. Меняйте таб в зависимости от значения в слайдере.
Не надо завязываться на классы.

Answer 2

[voyager-studio]

Наконец-то я всё доделал! Готовое решение можете посмотреть на Codepen