63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
import Swiper from "swiper";
|
|
import { Navigation, Pagination } from "swiper/modules";
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const hire = document.querySelector("section.we-hire");
|
|
if (hire === null) {
|
|
return;
|
|
}
|
|
|
|
const swiperContainers = document.querySelectorAll(".swiper-container");
|
|
|
|
swiperContainers.forEach((container, index) => {
|
|
const carousel = container.querySelector("#swiper-carousels") as HTMLElement,
|
|
btnPrev = container.querySelector(".carousel-prev") as HTMLElement,
|
|
btnNext = container.querySelector(".carousel-next") as HTMLElement,
|
|
pagination = carousel?.querySelector(".swiper-carousels-pagination") as HTMLElement;
|
|
|
|
carousel.classList.add(`swiper-${index}`);
|
|
pagination.classList.add(`swiper-pagination-${index}`);
|
|
btnPrev.classList.add(`prev-${index}`);
|
|
btnNext.classList.add(`next-${index}`);
|
|
|
|
new Swiper(carousel, {
|
|
modules: [Pagination, Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
spaceBetween: 15,
|
|
centeredSlides: true,
|
|
initialSlide: 0,
|
|
speed: 750,
|
|
pagination: {
|
|
el: `.swiper-pagination-${index}`,
|
|
clickable: true,
|
|
renderBullet: function (idx, className) {
|
|
return `<button class="btn btn-tertiary rounded-0 border-0 w-100 mx-2 p-0 ${className}" title="Aller à la slide ${idx + 1}"></button>`;
|
|
},
|
|
},
|
|
navigation: {
|
|
prevEl: `.prev-${index}`,
|
|
nextEl: `.next-${index}`,
|
|
},
|
|
on: {
|
|
beforeInit(swiper: Swiper) {
|
|
const slideCount = swiper.el.querySelectorAll(".swiper-slide").length;
|
|
if (slideCount !== 2) {
|
|
swiper.params.initialSlide = Math.floor(slideCount / 2);
|
|
}
|
|
},
|
|
},
|
|
breakpoints: {
|
|
576: {
|
|
slidesPerView: 1.5
|
|
},
|
|
768: {
|
|
slidesPerView: 2
|
|
},
|
|
992: {
|
|
slidesPerView: 2.5
|
|
},
|
|
},
|
|
});
|
|
});
|
|
});
|