Добрый день пытаюсь создать чтобы элементы пагинации выглядели следующим образом
Но при сформированном коде JS функци не работает, ошибки в консоли отсутствуют
Структура HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Delizioso</title>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">
<!-- <meta name="robots" content="noindex, nofollow"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<main class="page page--option">
<section class="menu-restaraunt menu-restaraunt--setup">
<div class="menu-restaraunt__container">
<h1 class="menu-restaraunt__title">Slider</h1>
<div class="menu-restaraunt__corpus">
<!-- $Slider's shell -->
<div class="category-dinner swiper">
<!-- $Part of a slider moving -->
<div class="category-dinner__wrapper swiper-wrapper">
<!-- $Slide #1 -->
<div class="category-dinner__slide swiper-slide">
<div class="swiper-slide__inner-item-menu">
<div class="swiper-slide__preview-card">
<img src="img/home_page/popular_set/breakfast/adobo_fried_rice.webp" alt="Adobo Fried Rice" class="swiper-slide__dish-pic" width="271" height="271">
</div>
<div class="swiper-slide__box-lower-level">
<div class="swiper-slide__area-text">
<div class="swiper-slide__main-hat">
<a href="" class="swiper-slide__link">
<h2 class="swiper-slide__name-dish">Adobo Fried Rice</h2>
</a>
<div data-rating="" data-rating-value="3.6" class="rating"></div>
</div>
<div class="swiper-slide__paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas consequat mi eget auctor aliquam, diam.</p>
</div>
</div>
<div class="swiper-slide__box-order">
<div class="swiper-slide__price">$12.50</div>
<div class="swiper-slide__box-group-btn">
<a href="order_online.html" class="swiper-slide__order-dish-now">Order now</a>
<a href="order_online.html" class="swiper-slide__btn-dish-plus">+</a>
</div>
</div>
</div>
</div>
</div>
<!-- $Slide #2 -->
<div class="category-dinner__slide swiper-slide">
<div class="swiper-slide__inner-item-menu">
<div class="swiper-slide__preview-card">
<img src="img/home_page/popular_set/breakfast/bacon_fried_rice.webp" alt="Bacon Fried Rice" class="swiper-slide__dish-pic" width="271" height="271">
</div>
<div class="swiper-slide__box-lower-level">
<div class="swiper-slide__area-text">
<div class="swiper-slide__main-hat">
<h2 class="swiper-slide__name-dish">Bacon Fried Rice</h2>
<div data-rating="" data-rating-value="4.6" class="rating"></div>
</div>
<div class="swiper-slide__paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas consequat mi eget auctor aliquam, diam.</p>
</div>
</div>
<div class="swiper-slide__box-order">
<div class="swiper-slide__price">$12.50</div>
<div class="swiper-slide__box-group-btn">
<a href="order_online.html" class="swiper-slide__order-dish-now">Order now</a>
<a href="order_online.html" class="swiper-slide__btn-dish-plus">+</a>
</div>
</div>
</div>
</div>
</div>
<!-- $Slide #3 -->
<div class="category-dinner__slide swiper-slide">
<div class="swiper-slide__inner-item-menu">
<div class="swiper-slide__preview-card">
<img src="img/home_page/popular_set/breakfast/beef_tapa.webp" alt="Beef Tapa" class="swiper-slide__dish-pic" width="271" height="271">
</div>
<div class="swiper-slide__box-lower-level">
<div class="swiper-slide__area-text">
<div class="swiper-slide__main-hat">
<h2 class="swiper-slide__name-dish">Beef Tapa</h2>
<div data-rating="" data-rating-value="3.7" class="rating"></div>
</div>
<div class="swiper-slide__paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas consequat mi eget auctor aliquam, diam.</p>
</div>
</div>
<div class="swiper-slide__box-order">
<div class="swiper-slide__price">$12.50</div>
<div class="swiper-slide__box-group-btn">
<a href="order_online.html" class="swiper-slide__order-dish-now">Order now</a>
<a href="order_online.html" class="swiper-slide__btn-dish-plus">+</a>
</div>
</div>
</div>
</div>
</div>
<!-- $Slide #4 -->
<div class="category-dinner__slide swiper-slide">
<div class="swiper-slide__inner-item-menu">
<div class="swiper-slide__preview-card">
<img src="img/home_page/popular_set/breakfast/belgian_waffle.webp" alt="Belgian Waffle" class="swiper-slide__dish-pic" width="271" height="271">
</div>
<div class="swiper-slide__box-lower-level">
<div class="swiper-slide__area-text">
<div class="swiper-slide__main-hat">
<h2 class="swiper-slide__name-dish">Belgian Waffle</h2>
<div data-rating="" data-rating-value="4.7" class="rating"></div>
</div>
<div class="swiper-slide__paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas consequat mi eget auctor aliquam, diam.</p>
</div>
</div>
<div class="swiper-slide__box-order">
<div class="swiper-slide__price">$12.50</div>
<div class="swiper-slide__box-group-btn">
<a href="order_online.html" class="swiper-slide__order-dish-now">Order now</a>
<a href="order_online.html" class="swiper-slide__btn-dish-plus">+</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- $If a shoot is required -->
<div class="swiper-pagination"></div>
<!-- $If navigation is required (left/right) -->
<button type="button" class="swiper-button-prev"></button>
<button type="button" class="swiper-button-next"></button>
</div>
</div>
</div>
</section>
</main>
<footer class="footer footer--setup">
<div class="footer__container">
<div class="footer__body body">
</div>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Код JS
document.addEventListener("DOMContentLoaded", function () {
const swiper = new Swiper(".swiper", {
slidesPerView: 3,
grid: {
rows: 2,
},
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
renderCustom: function (swiper, current, total) {
let paginationHtml = "";
const maxVisible = 3; // максимальное количество видимых элементов
// добавляем первый элемент
paginationHtml += '<span class="swiper-pagination-bullet">' + 1 + '</span>';
// добавляем обрезанные числа, если их нужно показать
if (total > maxVisible) {
let start = current - 1;
let end = current + 1;
if (current < 2) {
end += 2 - current;
} else if (current > total - 2) {
start -= current - (total - 3);
}
if (start > 1) {
paginationHtml += '<span class="swiper-pagination-bullet">..</span>';
}
for (let i = start; i <= end; i++) {
if (i > 1 && i < total) {
paginationHtml += '<span class="swiper-pagination-bullet">' + i + '</span>';
}
}
if (end < total) {
paginationHtml += '<span class="swiper-pagination-bullet">..</span>';
}
} else {
// добавляем остальные элементы
for (let i = 2; i <= total - 1; i++) {
paginationHtml += '<span class="swiper-pagination-bullet">' + i + '</span>';
}
}
// добавляем последний элемент
paginationHtml += '<span class="swiper-pagination-bullet">' + total + '</span>';
return paginationHtml;
}
}
});
});
