FEATURE Handling the javascript swiper behaviour

plugins/carhop-blocks/acf-blocks/gallery/view.js

@@ -0,0 +1,36 @@
+document.addEventListener("DOMContentLoaded", function () {
+	const galleries = document.querySelectorAll(".block-gallery");
+	if (!galleries) return;
+
+	const currentBlock = document.querySelector(".block-gallery");
+	if (!currentBlock) return;
+
+	const swiperFraction = currentBlock.querySelector(".swiper-pagination-fraction");
+	const slides = currentBlock.querySelectorAll(".swiper-slide");
+	const slideCount = slides.length;
+	swiperFraction.textContent = `Article n°1 sur ${slideCount}`;
+
+	new Swiper(".gallery-swiper", {
+		slidesPerView: 2,
+		spaceBetween: 30,
+		loop: true,
+		grabCursor: true,
+		navigation: {
+			nextEl: ".swiper-button-next",
+			prevEl: ".swiper-button-prev",
+		},
+		pagination: {
+			el: ".swiper-pagination",
+			clickable: true,
+			renderBullet: function (index, className) {
+				return `<button class="${className}"></button>`;
+			},
+		},
+		on: {
+			slideChange: (swiper) => {
+				const slidesCount = swiper?.slides?.length;
+				swiperFraction.textContent = `Photo n°${swiper.realIndex + 1} sur ${slidesCount}`;
+			},
+		},
+	});
+});