Если присутствует определённый класс, то к другому контейнеру добавляется ещё класс?

Question

[partyzanx]

Когда выбирается слайд в слайдере фликити, то ему присуждается класс .is-selected
У слайдов есть заданные классы типа .black, .red, .image и так далее.

Как сделать скрипт if .is-selected.black,
то к .bar добавляется класс on-black

То есть, когда активен слайд с классом .black, то для бара .bar добавляется класс .on-black

, когда
if .is-selected.red,
то к .bar добавляется класс on-red
То есть, когда активен слайд с классом .red, то для бара .bar добавляется класс .on-red

Comments

[Dima Polos]

Кто и как добавляет этот класс?

[partyzanx]

Dima Polos, добавляет скрипт flickity
я выложил пример

[Dima Polos]

partyzanx, у них в доках есть ивенты на которые можно подписаться?

[partyzanx]

Dima Polos,

$carousel.on( 'change.flickity', function( event, index ) {
  console.log( 'Slide changed to ' + index )
});

Answer 1

[FeST1VaL]

У вашего слайдера есть эвенты, подпишитесь на них и при смене слайдера проверяйте какой элемент сейчас is-selected и далее проверяйте какой у вас класс у этого элемента black image итд...

Я просто не пользуюсь данным слайдером... предпочитаю OWL

В офф. документации нашел это:

// jQuery
$carousel.on( 'change.flickity', function( event, index ) {
  console.log( 'Slide changed to ' + index )
});

Answer 2

[Вадим В]

Можно так, но как выше описали правильней...

$('.dot').on('click', (e)=>{
  if($('.black').hasClass('is-selected')) {
    $('.bar').addClass('on-black');
} else {
  $('.bar').removeClass('on-black');
}})