Как написать слайдер или хотя бы часть его, не понимаю...?

Как сделать слайдер, который берёт информацию из объекта js? То есть есть карточка, в каждой из ней предполагается слайдер, кнопки слайдера будут менять три вещи: заголовок, картинку и описание. Брать информацию предполагается из объекта в js. Вот разметка:

<div class="container">
        <div class="skills-wrapper">

            <div class="skill-card">
                
                    <h3 class="skill-card-title"></h3>
                    <img src="" class="skill-card-img">
                    <p class="skill-card-descr"></p>
               
                <span class="slide left"><img src="./img/skills/icon-left.svg" alt="left"></span>
                <span class="slide right"><img src="./img/skills/icon-right.svg" alt="right"></span>
            </div>
            

        </div>
    </div>

Вот javascript:

const skills = {
archery: {
    name: ['Базовая Стрельба', 'Продвинутая Стрельба', 'Экспертная Стрельба'],
    imageUrl: ['../img/skills/archery.jpg', '../img/skills/archery-adv.png', '../img/skills/archery-exp.png'],
    description: ['+10 % к урону (действует и на баллисту).', '+25 % к урону (действует и на баллисту).', '+50 % к урону (действует и на баллисту).']
},
airMagic: {
    name: ['Базовая Магия Воздуха', 'Продвинутая Магия Воздуха', 'Экспертная Магия Воздуха'],
    imageUrl: ['../img/skills/air-magic.png', '../img/skills/air-magic-adv.png', '../img/skills/air-magic-exp.png'],
    description: ['Уменьшает затраты маны на использование заклинаний.', 'Уменьшает затраты маны и увеличивает эффективность заклинаний.', 'Уменьшает затраты маны и максимально увеличивает эффективность заклинаний.']
},

}

let cardTitle = document.querySelector('.skill-card-title');
let cardImage = document.querySelector('.skill-card-img');
let cardDescr = document.querySelector('.skill-card-descr');

let leftBtn = document.querySelector('.left');
let rightBtn = document.querySelector('.right');

cardTitle.innerHTML = skills.archery.name[1];
cardImage.src = skills.archery.imageUrl[1];
cardDescr.innerHTML = skills.archery.description[1]

leftBtn.addEventListener('click', () => {
    cardTitle.innerHTML = skills.archery.name[0];
    cardImage.src = skills.archery.imageUrl[0];
    cardDescr.innerHTML = skills.archery.description[0];
})

rightBtn.addEventListener('click', () => {
    cardTitle.innerHTML = skills.archery.name[2]
    cardImage.src = skills.archery.imageUrl[2];
    cardDescr.innerHTML = skills.archery.description[2]; 
})

Css, если надо выложу.

Всё что у меня получается это одноразовая подстановка значений. Всё. Объясните, пожалуйста, как это сделать. И таких карточек будет, скажем штук 20. Но тут хотя бы, чтобы один слайдер заработал для начала.