Есть галерея выполненная с помощью слик слайдера, как при нажатии стрелок влево или вправо добавить или удалить класс слайдам (соответственно нажал вправо и следующему элементу, следующему слайду, добавился класс '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);
}
});
});
