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

Question

[Евгений Ромашов]

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

<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>

Вот js:

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 slider = document.querySelectorAll('.slide');

slider.forEach( item => {
    item.addEventListener('click', () => {
        
        for (let i = 0, j = 0, k = 0; i < skills.archery.name.length, j < skills.archery.imageUrl.length, k < skills.archery.description.length; i++, j++, k++) {

            cardTitle.innerHTML = skills.archery.name[i];
            cardImage.src = skills.archery.imageUrl[j];
            cardDescr.innerHTML = skills.archery.description[k]
        }  
    })
})

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

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

Answer 1

[Антон Шаманов]

тебе не нужно изменять контент, список слайдов оборачивается в контейнер с overflow:hide; position: relative и размером соответствующим слайду, список слайдов горизонтальный, при клике на "далее" блок смещается влево/вправо и за счет этого отображается следующий слайд. чтобы было понятнее вырежи в листе квадратное отверстие - это контейнер слайдера, а под него половижи листок со слайдами и двигай его влево вправо чтобы в окне отображался слайд

Answer 2

[Анатолий Димов]

Тут доступно изложена реализация слайдера на базе https://swiperjs.com/
https://www.youtube.com/watch?v=lXFKRGvV5T4