слайдер javascript объект

Question

Я хотел бы создать слайдер с JavaScript, скользящий автоматически (тайм-аут 5000) и вручную с кнопками prev и next и с клавиатурой. На самом деле я ищу учебники на YouTube и нашел три примера кода, которые отлично работают, но, конечно, не вместе. Мой наставник сказал, что я должен использовать объект (класс), куда я вставлю эти 3 изображения.

Я знаю, как создать класс с помощью конструктора et c .. Но я не понимаю, как он работает с изображениями. Какие параметры я должен использовать? И можно ли создать только одну функцию для опций (авто, вручную, клавиатура)?

Я не хочу использовать jQuery.

Ниже приведены три примера кода, которые я должен вставить в класс:

let tabImages = [];
let time = 5000;

// Image list
tabImages = ['images/velovimage.jpg', 'images/velov2.jpg', 'images/pietonvelo.jpg'];

// change Image

function changeImg(){
    document.slide.src = tabImages[i];

    if(i < tabImages.length - 1){
        i++;
    } else {
        i = 0;
    }

    setTimeout("changeImg()", time)
}

window.onload = changeImg;

/*

const img_con = document.getElementById('img-con');
const next = document.getElementById('next');
const prev = document.getElementById('prev');

const images = ['velovimage.jpg', 'velov2.jpg', 'pietonvelo.jpg']

let i = images.length;

// function for next slide

next.onclick = ()=> {
    i = (i<images.length) ?(i= i+1):(i=1);
    img_con.innerHTML = "<img class='img' src=images/"+images[i-1] +">";
}

// function for prev slide
prev.onclick = () => {
    i = (i<images.length+1 && i>1) ?(i = i-1):(i=images.length);
    img_con.innerHTML = "<img class='img' src=images/"+images[i-1] +">";
}

// keyboard

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}
function currentSlide(n) {
    showSlides(slideIndex = n);
}

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            //left
            e.preventDefault();
            slideIndex--;
            showSlides(slideIndex);
            break;
        case 39:
            //right
            e.preventDefault();
            slideIndex++;
            showSlides(slideIndex);
            break;
    }
}
*/

Answer 1

Попробуйте взглянуть на этот пример, представляющий собой карусель изображений с кнопками со стрелками: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_gallery, но добавьте следующий код для добавления поддержки клавиш со стрелками:

<script type="text/javascript">
jQuery(function($){
    $(document).keydown(function(e){
        switch(e.keyCode){
            case 37: {//left arrow
                $('.prev').trigger('click');
                break;
            }
            case 39: {//right arrow
                $('.next').trigger('click');
                break;
            }
        }
        if(Math.abs(e.keyCode - 38) === 1){
            e.preventDefault();
        }
    });
});
</script>

скажите, если это работает