Как создать карусель с помощью JavaScript и наведения на предыдущее и следующее изображение с помощью нажатия клавиш?

Question

Я хочу создать карусель, используя javascript, который имеет массив изображений бесконечности, и после окончания последнего изображения оно должно начинаться с первого изображения. При загрузке страницы первое изображение должно быть выбрано по умолчанию и иметь активную рамку на первом изображении. При нажатии клавиши со стрелкой вправо или влево активная граница изображения должна перемещаться соответственно следующему или предыдущему изображению. А при нажатии введите активное изображение границы должно быть выбрано и открывает ссылку.

Я пытался создать карусель, но при нажатии клавиши со стрелкой влево или вправо она не работает.

// Hover
var active = document.querySelector(".hover") || document.querySelector(".myImg a");

document.addEventListener("keydown",handler);
document.addEventListener("mouseover",handler);

function handler(e){
    console.log(e.which);
        active.classList.remove("hover");
           switch (e.keyCode) {
        case 37:
        active = active.previousElementSibling || active;
            break;
        case 39:
            active = active.nextElementSibling || active;
            break;
    default: active = e.target;
    }

        active.classList.add("hover");
}

// Carousel
var carousel = document.querySelector('.content');
var slider = document.querySelector('.slider');

var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var imagesA = document.querySelector('.carousel-img');
//  var vid = document.querySelector('.videos');
var direction;

next.addEventListener('click', function () {
    direction = -1;
    carousel.style.justifyContent = 'flex-start';
    slider.style.transform = 'translate(-20%)';
});

prev.addEventListener('click', function () {
    if (direction === -1) {
        direction = 1;
        slider.appendChild(slider.firstElementChild);
    }
    carousel.style.justifyContent = 'flex-end';
    slider.style.transform = 'translate(20%)';

});



slider.addEventListener('transitionend', function () {
    if (direction === 1) {
        slider.prepend(slider.lastElementChild);
    } else {
        slider.appendChild(slider.firstElementChild);
    }

    slider.style.transition = 'none';
    slider.style.transform = 'translate(0)';
    setTimeout(() => {
        slider.style.transition = 'all 0.5s';
    })
}, false);

Это может быть похоже на то, что мы видим на домашней карусели netflix, где у нас есть список обложек фильмов, но вместо щелчка мышью или мыши я хочу того же поведения с помощью нажатия клавиш. Пожалуйста, помогите.

КОД ЗДЕСЬ: codepen.io

Answer 1

События нажатия клавиш работают, но, вероятно, не делают то, что вы ожидали от них.Поскольку у вас уже есть некоторая логика, которая обрабатывает следующие и предыдущие события, связанные с щелчком, вы должны извлечь их как именованные функции, а также соответственно использовать их в событиях нажатия клавиш.

next.addEventListener("click", goNext);
function goNext() {
    direction = -1;
    carousel.style.justifyContent = "flex-start";
    slider.style.transform = "translate(-10%)";
}

prev.addEventListener("click", goPrev);
function goPrev() {
    if (direction === -1) {
        direction = 1;
        slider.appendChild(slider.firstElementChild);
    }
    carousel.style.justifyContent = "flex-end";
    slider.style.transform = "translate(20%)";
}

Теперь у вас есть готовые функции,просто используйте их в своем выражении switch:

function handler(e) {
    console.log(e.which);
    active.classList.remove("hover");
    switch (e.keyCode) {
        case 37:
            goPrev()
        break;
        case 39:
            goNext()
        break;
        default:
        active = e.target;
    }
    active.classList.add("hover");
}

вилка вашей ручки

Есть несколько других вещей, которые вам придется исправить / улучшить, так что вывозможно, вам придется вернуться после настройки вашего кода с более конкретными вопросами.