Sergey-web92,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#pagination {
display: flex;
padding: 0;
list-style-type: none;
justify-content: center;
}
#pagination li {
margin-right: 5px;
padding: 10px;
border: 1px solid black;
}
#pagination li:hover,
#pagination li.active {
cursor: pointer;
color: red;
border: 1px solid red;
}
.flex-wrap {
width: 100%;
height: 250px;
display: flex;
justify-content: center;
}
.flex-wrap div{
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: var(--img);
margin: 10px;
border: 1px solid black;
box-sizing: border-box;
}
.page-main {
width: 90%;
margin: 0 auto;
}
.button-container .btn:after{
content: attr(data-count)
}
.button-container{
display: flex;
justify-content: center;
}
.button-container .btn{
margin-right: 15px;
}
.button-container .btn.active{
background-color: #FFFAFA;
outline: none;
font-weight: bold;
}
</style>
</head>
<body>
<main class="page-main">
<div class="button-container">
</div>
<div class="flex-wrap">
</div>
<ul id="pagination">
</ul>
</main>
<script>
let users = [
{name: 'https://picsum.photos/200/300?random=1'},
{name: 'https://picsum.photos/200/300?random=2'},
{name: 'https://picsum.photos/200/300?random=3'},
{name: 'https://picsum.photos/200/300?random=4'},
{name: 'https://picsum.photos/200/300?random=5'},
{name: 'https://picsum.photos/200/300?random=6'}
];
let table = document.querySelector('.flex-wrap');
let pagination = document.querySelector('#pagination');
let index = 0;
let len = users.length;
let notesOnPage = 3;
const show = i => {
table.innerHTML = '';
for (let max = i + notesOnPage; i < max; i++) {
let td = document.createElement('div');
td.style.setProperty('--img', `url("${users[i].name}")`);
table.append(td);
}
}
show(index)
const page = () => {
pagination.innerHTML = '';
for (let i = 0; i < len; i += notesOnPage) {
let li = document.createElement('li');
li.textContent = (i / notesOnPage) + 1;
let indexPage = Math.min(i, len - notesOnPage);
li.dataset.index = indexPage;
if (index >= indexPage && index < indexPage + notesOnPage) {
li.classList.add('active');
index = indexPage;
show(index);
}
pagination.append(li);
}
}
page();
pagination.addEventListener('click', ({target}) => {
let i = target.dataset.index;
if (i === void 0) return;
pagination.querySelectorAll('li').forEach(li => li.classList.toggle('active', li === target));
index = +i;
show(index)
})
const buttonContainer = document.querySelector(".button-container");
const counts = [1, 2, 3, 5, 6];
const btnCount = ar => ar.forEach(num => {
let btn = document.createElement('button');
btn.classList.add('btn');
if(num == notesOnPage) btn.classList.add('active');
btn.dataset.count = Math.min(len, num);
buttonContainer.append(btn);
})
btnCount(counts)
buttonContainer.addEventListener("click", ({target}) => {
let count = target.dataset.count;
if (count === void 0) return;
buttonContainer.querySelectorAll('.btn').forEach(btn => btn.classList.toggle('active', btn === target));
notesOnPage = +count;
page();
});
</script>
</body>
</html>