Есть файл Json из него загружаем данные и формируем объекты на странице.
Если пролистывать при помощи стрелок перескакивают страницы.
Помогите понять в чем дело.
let block = document.querySelector('#block');
let pagination = document.querySelector('.pagination__list');
let prevPage = document.querySelector('.pagination__arrow_prev');
let nextPage = document.querySelector('.pagination__arrow_next');
let notesOnPage = 4;
let active;
async function getJson() {
const fileJson = 'json/product.json';
let response = await fetch(fileJson, {
method: "GET"
});
if (response.ok) {
let result = await response.json();
loadProducts(result);
alert("Данные загружены");
console.log(result);
} else {
alert("ошибка")
}
}
function loadProducts(data) {
const proData = data.products;
let countOfItems = Math.ceil(proData.length / notesOnPage);
let paginationItem = [];
for (let i = 1; i <= countOfItems; i++) {
let li = document.createElement('li');
li.classList.add('pagination__item');
pagination.appendChild(li);
let span = document.createElement('span');
span.innerHTML = i;
li.appendChild(span);
paginationItem.push(span);
}
showPage(paginationItem[0]);
for (let item of paginationItem) {
item.addEventListener('click', function() {
showPage(this);
});
}
function showPage(item) {
if (active) {
active.classList.remove('_active')
}
active = item;
item.classList.add('_active');
let pageNum = +item.innerHTML;
let start = (pageNum - 1) * notesOnPage;
let end = start + notesOnPage;
let notes = proData.slice(start, end);
block.innerHTML = '';
for (let item of notes) {
const productTitle = item.title;
const productImage = item.img;
block.insertAdjacentHTML("beforeend",
`<div class="block__item">
<h2 class="block__title">${productTitle}</h2>
<img class="block__img" src="img/icons/${productImage}" alt="">
</div>`
);
hideOverPages();
}
prevPage.addEventListener('click', function() {
if (active.parentElement.previousElementSibling) {
showPage(active.parentElement.previousElementSibling.querySelector('span'));
}
});
nextPage.addEventListener('click', function() {
if (active.parentElement.nextElementSibling) {
showPage(active.parentElement.nextElementSibling.querySelector('span'));
}
});
function hideOverPages() {
let items = [...pagination.children];
if (items.length > 5) {
items.forEach(function(item) {
item.classList.add('_hide')
});
items[0].classList.remove('_hide');
if (active.parentElement.previousElementSibling) {
active.parentElement.previousElementSibling.classList.remove('_hide');
}
active.parentElement.classList.remove('_hide');
if (active.parentElement.nextElementSibling) {
active.parentElement.nextElementSibling.classList.remove('_hide');
}
items[items.length - 1].classList.remove('_hide');
}
}
}
}
getJson();
.block {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 50px;
margin: 0 0 50px;
}
.block__item {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.55);
border-radius: 4px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.55);
padding: 5px;
}
.block__title {
font-size: 22px;
color: #9c9c9c;
margin: 0 0 40px;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
}
.pagination__arrow_prev {
position: relative;
cursor: pointer;
}
.pagination__arrow_prev:before {
position: absolute;
content: "";
top: -15px;
left: -50px;
width: 0;
height: 0;
border-width: 15px 30px 15px 0;
border-color: transparent rgba(0, 0, 0, 0.55) transparent transparent;
border-style: solid;
filter: drop-shadow(10px 0px 5px rgba(0, 0, 0, 0.55));
}
.pagination__arrow_next {
position: relative;
cursor: pointer;
}
.pagination__arrow_next:before {
position: absolute;
content: "";
top: -15px;
right: -50px;
width: 0;
height: 0;
border-width: 15px 0 15px 30px;
border-color: transparent transparent transparent rgba(0, 0, 0, 0.55);
border-style: solid;
filter: drop-shadow(-10px 0px 5px rgba(0, 0, 0, 0.55));
}
.pagination__list {
display: flex;
gap: 0 20px;
}
.pagination__item {
border: 1px solid rgba(0, 0, 0, 0.55);
border-radius: 22px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.55);
}
.pagination__item span {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 22px;
cursor: pointer;
}
.pagination__item span._active {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.55);
}
.pagination__item._hide {
position: relative;
border: 1px solid rgba(0, 0, 0, 0);
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0);
}
.pagination__item._hide:after {
position: absolute;
content: "• • •";
top: 0;
right: 0;
bottom: 0;
left: 0;
display: grid;
place-items: center;
border-radius: 22px;
background-color: #fff;
}
.pagination__item._hide+._hide {
display: none;
}
.pagination__link {
font-size: 20px;
color: #3b3b3b;
}
<div class="block" id="block"></div>
<div class="pagination" id="pagination">
<div class="pagination__arrow pagination__arrow_prev"></div>
<ul class="pagination__list">
</ul>
<div class="pagination__arrow pagination__arrow_next"></div>
</div>
{
"products": [ { "title": "Pagination 1", "img": "loading.gif" }, { "title": "Pagination 2", "img": "loading.gif" }, { "title": "Pagination 3", "img": "loading.gif" }, { "title": "Pagination 4", "img": "loading.gif" }, { "title": "Pagination 5", "img": "loading.gif" }, { "title": "Pagination 6", "img": "loading.gif" }, { "title": "Pagination 7", "img": "loading.gif" }, { "title": "Pagination 8", "img": "loading.gif" }, { "title": "Pagination 9", "img": "loading.gif" }, { "title": "Pagination 10", "img": "loading.gif" }, { "title": "Pagination 11", "img": "loading.gif" }, { "title": "Pagination 12", "img": "loading.gif" }, { "title": "Pagination 13", "img": "loading.gif" }, { "title": "Pagination 14", "img": "loading.gif" }, { "title": "Pagination 15", "img": "loading.gif" }, { "title": "Pagination 16", "img": "loading.gif" }, { "title": "Pagination 17", "img": "loading.gif" }, { "title": "Pagination 18", "img": "loading.gif" }, { "title": "Pagination 19", "img": "loading.gif" }, { "title": "Pagination 20", "img": "loading.gif" }, { "title": "Pagination 21", "img": "loading.gif" }, { "title": "Pagination 22", "img": "loading.gif" }, { "title": "Pagination 23", "img": "loading.gif" }, { "title": "Pagination 24", "img": "loading.gif" } ] }