63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
// import Swiper JS
|
|
import Swiper, { Autoplay } from "swiper";
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const swiperConfig = {
|
|
swiperSociety: {
|
|
modules: [Autoplay],
|
|
preventInteractionOnTransition: true,
|
|
loop: true,
|
|
slidesPerView: 3,
|
|
spaceBetween: 30,
|
|
speed: 3000,
|
|
autoplay: {
|
|
delay: 1,
|
|
disableOnInteraction: false,
|
|
},
|
|
},
|
|
|
|
swiperEngagments: {
|
|
grabCursor: true,
|
|
breakpoints: {
|
|
// when window width is >= 480px
|
|
480: {
|
|
slidesPerView: 1,
|
|
},
|
|
// when window width is >= 650px
|
|
650: {
|
|
slidesPerView: 2,
|
|
},
|
|
// when window width is >= 992px
|
|
992: {
|
|
slidesPerView: 3,
|
|
},
|
|
// when window width is >= 1200px
|
|
1200: {
|
|
slidesPerView: 4,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
type SwiperSlider = {
|
|
element: HTMLElement;
|
|
swiper: Swiper;
|
|
};
|
|
const swiperVol = document.getElementsByClassName(
|
|
"swiper-vol"
|
|
) as HTMLCollectionOf<HTMLElement>,
|
|
sliders: SwiperSlider[] = [];
|
|
|
|
for (const htmlElt of swiperVol) {
|
|
if (!swiperConfig[htmlElt.id as keyof typeof swiperConfig]) {
|
|
throw new Error(`Undefined swiper id ${htmlElt.id}`);
|
|
}
|
|
|
|
sliders.push({
|
|
element: htmlElt,
|
|
swiper: new Swiper(
|
|
htmlElt,
|
|
swiperConfig[htmlElt.id as keyof typeof swiperConfig]
|
|
),
|
|
});
|
|
}
|
|
});
|