Вот код, который нужно добавить/изменить уже имеющийся
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. В его двух условиях повторяющаяся логика, которую можно уместить в одну функцию и дальше уже вызывать с каким-либо аргументом, но у меня не вышло, потому что в сборке аргументы функции неожиданно трактуются как нечто совсем отличное от переданного аргумента.
