Нестандартная навигация слайдера

222
17 декабря 2021, 00:20

Есть много слайдеров как ниже

<div class="slider">
    <div class="slider-1">...</div>
    <div class="slider-2 slider--active">...</div>
    <div class="slider-3">...</div>
    <div class="slider-4">...</div>
    <div class="slider-5">...</div>
<div>

Нужно чтобы при клике присваивался слайдеру класс slider--active если у выбранного дива есть два класса.

<div class="slider__menu">
    <div class="slider__menu-item">slider-1</div>
    <div class="slider__menu-item slider__menu-active">slider-2</div>
    <div class="slider__menu-item">slider-3</div>
    <div class="slider__menu-item">slider-4</div>
</div>

Ну или если есть идеи как реализовать меню переключения слайдеров, буду очень рад. Заранее спасибо! P/s Прикрепляю картинку верстки для визуализации.

Answer 1

Если я правильно понял:

const slider = document.querySelector('.slider__menu'); // Выбираем родителя
slider.addEventListener('click', (evt) => { // Добавляем родителю событие клика
  const currentItem = evt.target; // Выбираем элемент, по которому кликнули
  const isTwoClasses = currentItem.classList.length === 2; // Условие на количество классов равное двум
  if (isTwoClasses) {
     currentItem.classList.add('slider__menu-active'); // Добавляем класс, если условие истинно
  }
});

<div class="slider__menu">
  <div class="slider__menu-item">slider-1</div>
  <div class="slider__menu-item second-class">slider-2</div>
  <div class="slider__menu-item">slider-3</div>
  <div class="slider__menu-item">slider-4</div>
</div>
READ ALSO
Chrome Extension передача сообщений
javascript

Chrome Extension передача сообщений

Столкнулся с еще одной проблемой при передаче сообщения (chromeruntime

 164
Перебор Map со счетчиком итераций
javascript

Перебор Map со счетчиком итераций

Есть экземпляр Map, например

 128
Ссылка при попытке ухода с сайта
javascript

Ссылка при попытке ухода с сайта

Я часто видел, что при попытке навести на крестик, сайт что-то предлагаетКак это реализовано?

 282
Как установить язык в headers?
javascript

Как установить язык в headers?

Как в "Accept-Language" установить язык через jquery? Я определяю язык через "Accept-Language"Пытаюсь, чтобы все запросы шли с запросом другого языка, но headers...

 228