$BODY$
<?if($PAGE_SELECTOR$)?>
<div class="pagination__pages d-flex jc-center ai-center">
<!-- Левая стрелка -->
<a class="swchItem swchItem-prev" href="#" onclick="goPrev(); return false;"><span>←</span></a>
<!-- Номера страниц -->
<span class="custom-pages">
$PAGE_SELECTOR$
</span>
<!-- Правая стрелка -->
<a class="swchItem swchItem-next" href="#" onclick="goNext(); return false;"><span>→</span></a>
</div>
<?endif?>
<style>
.pagination__pages {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
/* Кнопки страниц — квадратные */
.pagesBlockuz1 a,
.pagesBlockuz1 b {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 6px 10px;
border-radius: 4px;
font-weight: bold;
background-color: rgba(255,255,255,0.05);
color: #f0f0f0;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
text-decoration: none;
height: 36px;
min-width: 36px;
box-sizing: border-box;
transition: all 0.3s;
}
.pagesBlockuz1 b {
background-color: rgba(255,255,255,0.15);
color: #fff;
cursor: default;
}
/* Стрелки — круглые */
.swchItem-prev, .swchItem-next {
border-radius: 50%;
font-size: 18px;
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255,255,255,0.05);
color: #f0f0f0;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: all 0.3s;
}
/* Hover только для активных стрелок */
.swchItem-prev:not(.disabled):hover,
.swchItem-next:not(.disabled):hover {
background-color: rgba(255,255,255,0.2);
}
/* Деактивированные стрелки — полностью мертвые */
.swchItem-prev.disabled,
.swchItem-next.disabled {
color: #777;
background-color: rgba(255,255,255,0.02);
cursor: default;
box-shadow: none;
transition: none;
pointer-events: none;
}
</style>
<script>
// Получаем текущую страницу
function getCurrentPage() {
const active = document.querySelector('.custom-pages b span');
return active ? parseInt(active.textContent) : 1;
}
// Получаем общее количество страниц, включая текущую
function getTotalPages() {
const pageLinks = document.querySelectorAll('.custom-pages a.swchItem');
// Берем максимальный номер страницы среди ссылок и активной
let maxPage = getCurrentPage();
pageLinks.forEach(link => {
const match = link.textContent.match(/\d+/);
if (match) {
const num = parseInt(match[0]);
if (num > maxPage) maxPage = num;
}
});
return maxPage;
}
// Обновляем состояние стрелок
function updateArrows() {
const current = getCurrentPage();
const total = getTotalPages();
const prev = document.querySelector('.swchItem-prev');
const next = document.querySelector('.swchItem-next');
prev.classList.toggle('disabled', current <= 1);
next.classList.toggle('disabled', current >= total);
}
// Переключение назад
function goPrev() {
const current = getCurrentPage();
if (current <= 1) return;
const prevLink = document.querySelector(`.custom-pages a[onclick*="spages('${current-1}'"]`);
prevLink?.click();
setTimeout(updateArrows, 50);
}
// Переключение вперед
function goNext() {
const current = getCurrentPage();
const total = getTotalPages();
if (current >= total) return;
const nextLink = document.querySelector(`.custom-pages a[onclick*="spages('${current+1}'"]`);
nextLink?.click();
setTimeout(updateArrows, 50);
}
// Инициализация
function initCustomPagination() {
// Скрываем Юкозовские стрелки
document.querySelectorAll('.custom-pages a.swchItem-prev, .custom-pages a.swchItem-next').forEach(el => {
el.style.display = 'none';
});
// Обновляем стрелки при кликах на номера страниц
document.querySelectorAll('.custom-pages a.swchItem').forEach(el => {
el.addEventListener('click', () => setTimeout(updateArrows, 50));
});
updateArrows(); // инициализация при загрузке
}
window.addEventListener('DOMContentLoaded', initCustomPagination);
</script>
