Почему не правильно отображаються элементы пагинации при скролее Slider Swiper?

Question

[Alina1984]

Прошу помочь исправить логику поведенния булетов в Slider Swiper.
По условия отображения булетов для Slider Swiper я их ограничела для одновременного отображения до 3 штук.
Но при перелистывании слайдов именно от начала до конца, поведения буллетов неправильное. А именно перед первым шагом (началом перелистывания) активным буллетом, из трех, является первый, как и положено, и для него срабатывают стили:
.swiper-pagination-bullet-active {
background-color: var(--bgHoverItem);
}
На первом шаге не срабатывает переход на второй булет и так далее. За исключением когда остается в конце осуществить три шага. То тогда аж тогда осуществляется корректный переход (для трех осташихся слайдов) на второй и третий буллет.
Когда перелистывания идет от конца к началу, то работа буллетов корректна. При первом клике отображается активным 2 буллет, при втором клике активным стает 1 буллет и так далле он остается активным до самого начала перелистывания слайдов

Как происходит ошибка показано на видео https://fex.net/ru/s/pcmltdz

мой код:

import Swiper from "swiper";
import { Navigation, Pagination } from "swiper/modules";

function initSliders() {
	if (document.querySelector(".partners-logo__slider")) {
		new Swiper(".partners-logo__slider", {
			modules: [Navigation, Pagination],
			observer: true,
			observeParents: true,
			slidesPerView: 3,
			spaceBetween: 25,
			speed: 800,

			//@ Pagination
			pagination: {
				el: ".swiper-pagination",
				clickable: true,
				renderBullet: function (index, className) {
					return `<span class="${className}"></span>`;
				},
			},

			//@ The Navigation Buttons "Left/Right"
			navigation: {
				prevEl: ".swiper-button-prev",
				nextEl: ".swiper-button-next",
			},

			//@ Breikpoints
			breakpoints: {
				768: {
					slidesPerView: 3,
					spaceBetween: 25,
				},
				992: {
					slidesPerView: 4,
					spaceBetween: 64,
				},
			},

			//@ Events
			on: {
				slideChange: function () {
					updatePagination(this);
				},
				init: function () {
					updatePagination(this);
				},
			},
		});
	}
}

//* Paginal update function
function updatePagination(swiper) {
	const bullets = swiper.pagination.bullets;
	const totalBullets = bullets.length;
	const currentIndex = swiper.activeIndex;
	const visibleBullets = 3;

	// Скрываем все буллеты
	bullets.forEach((bullet, index) => {
		bullet.style.display = "none";

		//* display only visible 3 bullets
		if (
			(index >= currentIndex && index < currentIndex + visibleBullets) ||
			(index >= totalBullets - visibleBullets && currentIndex >= totalBullets - visibleBullets)
		) {
			bullet.style.display = "block";
		}
	});
}

window.addEventListener("load", function (e) {
	//* Запуск инициализации слайдеров
	initSliders();
});