Load Swiper only on the home page

assets/js/main.js

@@ -46,65 +46,67 @@ document.addEventListener("DOMContentLoaded", function () {
 
 
 
-  // Swiper Init
-  const heroSwiper = new Swiper(".heroSwiper", {
-    slidesPerView: 1,
-    loop: true,
-    pagination: {
-      el: ".swiper-pagination",
-      dynamicBullets: true,
-    },
-  });
+  // Swiper Init (the library is only loaded on pages that have a carousel)
+  if (typeof Swiper !== "undefined") {
+    const heroSwiper = new Swiper(".heroSwiper", {
+      slidesPerView: 1,
+      loop: true,
+      pagination: {
+        el: ".swiper-pagination",
+        dynamicBullets: true,
+      },
+    });
 
-  const newsSwiper = new Swiper(".newsSwiper", {
-    slidesPerView: 1,
-    spaceBetween: 10,
-    pagination: {
-      el: ".swiper-pagination",
-      dynamicBullets: true,
-    },
-    navigation: {
-      nextEl: ".swiper-button-next",
-      prevEl: ".swiper-button-prev",
-    },
-    breakpoints: {
-      576: {
-        slidesPerView: 2,
-        spaceBetween: 20,
+    const newsSwiper = new Swiper(".newsSwiper", {
+      slidesPerView: 1,
+      spaceBetween: 10,
+      pagination: {
+        el: ".swiper-pagination",
+        dynamicBullets: true,
       },
-      768: {
-        slidesPerView: 3,
-        spaceBetween: 20,
-      }
-    },
-  });
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+      breakpoints: {
+        576: {
+          slidesPerView: 2,
+          spaceBetween: 20,
+        },
+        768: {
+          slidesPerView: 3,
+          spaceBetween: 20,
+        }
+      },
+    });
 
-  const eventsSwiper = new Swiper(".eventsSwiper", {
-    slidesPerView: 1,
-    spaceBetween: 10,
-    pagination: {
-      el: ".swiper-pagination",
-      dynamicBullets: true,
-    },
-    navigation: {
-      nextEl: ".swiper-button-next",
-      prevEl: ".swiper-button-prev",
-    },
-    breakpoints: {
-      576: {
-        slidesPerView: 2,
-        spaceBetween: 30,
+    const eventsSwiper = new Swiper(".eventsSwiper", {
+      slidesPerView: 1,
+      spaceBetween: 10,
+      pagination: {
+        el: ".swiper-pagination",
+        dynamicBullets: true,
       },
-      768: {
-        slidesPerView: 3,
-        spaceBetween: 30,
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
       },
-      1200: {
-        slidesPerView: 3,
-        spaceBetween: 40
-      }
-    },
-  });
+      breakpoints: {
+        576: {
+          slidesPerView: 2,
+          spaceBetween: 30,
+        },
+        768: {
+          slidesPerView: 3,
+          spaceBetween: 30,
+        },
+        1200: {
+          slidesPerView: 3,
+          spaceBetween: 40
+        }
+      },
+    });
+  }
 
   // PageFind Init
   window.addEventListener('DOMContentLoaded', (event) => {

layouts/partials/essentials/head.html

@@ -13,10 +13,12 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 
 {{/*  Swiper JS  */}}
+{{ if .IsHome }}{{/*  only the home page has carousels  */}}
 <link
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
 />
+{{ end }}
 
 {{/*  Favicon  */}}
 <link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon">

layouts/partials/essentials/script-footer.html

@@ -1,5 +1,7 @@
-{{/*  Swiper JS  */}}
+{{/*  Swiper JS (only the home page has carousels)  */}}
+{{ if .IsHome }}
 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+{{ end }}
 
 {{/*  Scripts  */}}
 {{ with resources.Get "js/plugins.js" }}