Hice mi control deslizante, estoy buscando una idea o una solución para mostrar datos de json dinámicamente. Mi idea era:

1. obtener datos de json,

2. agregar diapositivas con "diapositiva" de json

3. agregue "id" y "nombre", etc. a la matriz

4.cuando el siguiente btn haga clic en mostrar información de la matriz

Al buscar datos en bucle y mostrarlos así

 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); }

Mi problema es que no sé cómo limitar las diapositivas cargadas en la página a 4 y luego cargar otra si se hace clic en la flecha derecha.