139 lines
3.9 KiB
TypeScript
139 lines
3.9 KiB
TypeScript
import Swiper from "swiper";
|
|
import { Navigation } from "swiper/modules";
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// SWIPER
|
|
const swiperConfig = {
|
|
"swiper-homepage-news": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
spaceBetween: 60,
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
breakpoints: {
|
|
1200: {
|
|
slidesPerView: 3,
|
|
},
|
|
},
|
|
},
|
|
"swiper-news": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
spaceBetween: 60,
|
|
keyboard: {
|
|
enabled: true
|
|
},
|
|
// Navigation arrows
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
breakpoints: {
|
|
// when window width is >= 1200px
|
|
1200: {
|
|
slidesPerView: 3,
|
|
},
|
|
},
|
|
},
|
|
"swiper-ranges": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
spaceBetween: 60,
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
breakpoints: {
|
|
1200: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 0,
|
|
},
|
|
},
|
|
},
|
|
"swiper-joinus": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
spaceBetween: 60,
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
},
|
|
"swiper-product-pictures": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
spaceBetween: 60,
|
|
// Navigation arrows
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
}
|
|
},
|
|
"swiper-other-products": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
spaceBetween: 60,
|
|
// Navigation arrows
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
breakpoints: {
|
|
// when window width is >= 576px
|
|
576: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 0,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
type SwiperSlider = {
|
|
element: HTMLElement;
|
|
swiper: Swiper;
|
|
};
|
|
const swiperVol = document.getElementsByClassName("swiper") 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,
|
|
// @ts-ignore
|
|
swiperConfig[htmlElt.id as keyof typeof swiperConfig]
|
|
),
|
|
});
|
|
}
|
|
|
|
// GoToTop Button
|
|
const backToTopBtn = document.getElementById("backtotop")as HTMLElement;
|
|
window.onscroll = function () {
|
|
if (
|
|
document.body.scrollTop > 50 ||
|
|
document.documentElement.scrollTop > 50
|
|
) {
|
|
backToTopBtn.style.display = "flex";
|
|
} else {
|
|
backToTopBtn.style.display = "none";
|
|
}
|
|
};
|
|
backToTopBtn.addEventListener("click", function () {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
});
|
|
|
|
});
|