57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
function initiateSwiper() {
|
|
const currentBlock = document.querySelector(
|
|
".wp-block-carhop-blocks-highlight-timeline"
|
|
);
|
|
if (!currentBlock) return;
|
|
|
|
// const swiperFraction = currentBlock.querySelector(
|
|
// ".swiper-pagination-fraction"
|
|
// );
|
|
const slides = currentBlock.querySelectorAll(".swiper-slide");
|
|
const slideCount = slides.length;
|
|
const years = Array.from(slides).map((slide) => {
|
|
const yearEl = slide.querySelector(".highlight-timeline-step__year");
|
|
if (yearEl && yearEl.textContent) {
|
|
return yearEl.textContent.trim();
|
|
}
|
|
const id = slide.id || "";
|
|
const match = id.match(/^year-(.+)$/);
|
|
return match ? match[1] : "";
|
|
});
|
|
|
|
highlightTimelineSwiper = new Swiper(".highlight-timeline-swiper", {
|
|
slidesPerView: 1,
|
|
spaceBetween: 30,
|
|
loop: true,
|
|
grabCursor: true,
|
|
keyboard: {
|
|
enabled: true,
|
|
onlyInViewport: true,
|
|
},
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
mousewheel: {
|
|
enabled: true,
|
|
forceToAxis: true, // Force le scroll dans l'axe du slider
|
|
sensitivity: 1, // Sensibilité du scroll (1 = normal)
|
|
releaseOnEdges: false, // Continue le scroll même aux bords
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
renderBullet: function (index, className) {
|
|
return `<button class="${className}">${years[index] ?? ""}</button>`;
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
window.addEventListener("DOMContentLoaded", (event) => {
|
|
initiateSwiper();
|
|
|
|
// swiperCheckBreakpoints();
|
|
// window.addEventListener("resize", swiperCheckBreakpoints);
|
|
});
|