I made my slider, im looking for idea or solution to displaying data from json dynamically. My idea was to:

1.get data from json,

2.append slides with "slide" from json

3.add "id" and "name" etc. to array

4.when next btn clicked display info from array

In fetch looping trought data and displaying them like this

        fetch(this.jsonUrl)
            .then(res => {
                if (res.ok) {
                    return res.json();
                }
            })
            .then(data => {
                data.forEach(element => {
                    this.loadElements(element); // in this function i display all data from json
                });
            });

    loadElements(element) {
        this.idNumber++;
        this.slide = document.createElement("div");
        this.slide.classList.add('hs-slide');
        this.slide.setAttribute('id', 'hs-slide' + this.idNumber);
        this.slide.setAttribute('data-hsitem', element.id);

        // templateSlide();

        const obj = {
            slide: element.slide,
            slide: element.name,
        };

        this.jsonItemsData.push(obj);
        this.slide.innerHTML = `${element.slide}`;
        this.list.appendChild(this.slide);
    }

My problem is that i don't know how to limit slides loaded on page to 4, and then load another if right arrow clicked.