Задать вопрос
@SeeYou1ater
javascript

Как следующему элементу добавлять/удалять класс?

Есть галерея выполненная с помощью слик слайдера, как при нажатии стрелок влево или вправо добавить или удалить класс слайдам (соответственно нажал вправо и следующему элементу, следующему слайду, добавился класс 'opened') в обратном направлении та же ситуация. Скинул код от которого пока что отталкиваюсь. Возникает проблема как отталкиваться от слайда, на котором я сейчас. Так же добавлю, что при клике с мышки все нормально, просто для практики захотелось добавить работу со стрелок. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.min.css">
</head>
<body>
    <div class="slider">
        <div class="slider__item">
            <img class="slider__image" src="../images/1.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/2.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/3.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/4.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/5.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/6.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/7.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/8.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/9.jpg" alt="#">
        </div>
    </div>
    <div class="slider-bg">
        <div class="slider__item">
            <img class="slider__image" src="../images/1.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/2.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/3.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/4.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/5.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/6.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/7.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/8.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/9.jpg" alt="#">
        </div>
    </div>
<script src="js/main.min.js"></script>
</body>
</html>


@import "reset.scss";
@import "slick.scss";

body {
    color: #ffffff;
    overflow: hidden;
    background-color: #000000;
}
.slider {
    z-index: 1;
    transform: rotate(15deg);
    top: 10vh;
}

.slider-bg {
    z-index: 0;
    transform: rotate(-15deg);
    top: -85vh;
    opacity: 0.15;
    filter: blur(120px) saturate(10);    
}
.slick-list {
    overflow: visible;
}

.slider__item.opened {
    z-index: 2;
    overflow: visible;
    transform: rotate(-15deg) translateX(-70%) translateY(5%);
    box-shadow: rgb(0 0 0 / .75) 0 0 0 5000px;
}

.slider-bg .slider__item{
    height: 100vh;
}
.slider__item{
    height: 75vh;
    margin: 0 20px;
    overflow: hidden;
    transition: all 0.4s;
}

.slider__image {
    height: 100%;
    width: auto;
    transition: 0.5s;
}


const removeClasses = (slide) => {
    document.querySelectorAll('.slider__item').forEach((item) => {
        item == slide ? null : item.classList.remove('opened');
});
}

document.querySelectorAll('.slider__item').forEach((item) => {
    item.addEventListener('click', (event) => {

        const currentItem = event.target.closest('.slider__item');
        currentItem.classList.toggle('opened');
        removeClasses(currentItem);
    });
});

document.querySelectorAll('.slider__item').forEach((item) => {
    item.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowRight') {
        const currentItem = event.target.closest('.slider__item')
        currentItem.classList.toggle('opened')
        removeClasses(currentItem);
        }
    });
});
  • Вопрос задан
  • 283 просмотра
21 комментарий
Подписаться 2 Простой 21 комментарий
Решения вопроса 1
ArturMavlidov
@ArturMavlidov
Вот код, который нужно добавить/изменить уже имеющийся

let count;

document.querySelectorAll(".slider__item").forEach((item) => {
  item.addEventListener("click", (event) => {
    const currentItem = event.target.closest(".slider__item");

    count = currentItem.dataset.slickIndex; // Новая строка
    currentItem.classList.toggle("opened");
    removeClasses(currentItem);
  });
});

document.addEventListener("keydown", (e) => {
  if (count === undefined) return;

  if (e.key === 'ArrowLeft') {
    const currentSlide = document.querySelector(`[data-slick-index='${count}']`);
    const nextSlide = document.querySelector(`[data-slick-index='${+count - 1}']`);

    currentSlide.classList.remove("opened");
    nextSlide.classList.add('opened')

    count--;

  } else if (e.key === 'ArrowRight') {
      const currentSlide = document.querySelector(`[data-slick-index='${count}']`);
      const nextSlide = document.querySelector(`[data-slick-index='${+count + 1}']`);

      currentSlide.classList.remove("opened");
      nextSlide.classList.add('opened')

      count++;
  }
});


Создали переменную count, теперь при клике по какому-либо слайду в неё записывается порядковый номер кликнутого слайда. Дальше на документе лежит обработчик события keydown. В его двух условиях повторяющаяся логика, которую можно уместить в одну функцию и дальше уже вызывать с каким-либо аргументом, но у меня не вышло, потому что в сборке аргументы функции неожиданно трактуются как нечто совсем отличное от переданного аргумента.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сверстать десктоп версию сайта в tailwind
22 нояб. 2024, в 06:06
1500 руб./в час
Создать TG бота
22 нояб. 2024, в 06:04
1 руб./за проект
Тестирование модуля ElasticSearch через ftp
22 нояб. 2024, в 03:54
1500 руб./за проект
Ещё заказы