https://lionsystems.com.au/site/DefaultSite/skins/lion-systems/js/vendors/swiper.js

1function initializeSwiperCarousels() {
2   const swiperContainers = document.querySelectorAll(".swiper-container");
3
4   swiperContainers.forEach((swiperContainer) => {
5      const speed = swiperContainer.getAttribute("data-speed") || 400;
6      const spaceBetween = swiperContainer.getAttribute("data-space-between") || 20;
7      const paginationEnabled = swiperContainer.getAttribute("data-pagination") === "true";
8      const navigationEnabled = swiperContainer.getAttribute("data-navigation") === "true";
9      const autoplayEnabled = swiperContainer.getAttribute("data-autoplay") === "true";
10      const autoplayDelay = swiperContainer.getAttribute("data-autoplay-delay") || 3000;
11      const paginationType = swiperContainer.getAttribute("data-pagination-type") || "bullets";
12      const centerSlides = swiperContainer.getAttribute("data-center-slides") === "true";
13      const effect = swiperContainer.getAttribute("data-effect") || "slide"; // New attribute for effect type
14
15      // Parse breakpoints from data attribute
16      const breakpointsData = swiperContainer.getAttribute("data-breakpoints");
17      let breakpoints = {};
18      if (breakpointsData) {
19         try {
20            breakpoints = JSON.parse(breakpointsData);
21         } catch (error) {
22            console.error("Error parsing breakpoints data:", error);
23         }
24      }
25
26      const swiperOptions = {
27         speed: parseInt(speed),
28         spaceBetween: parseInt(spaceBetween),
29         breakpoints: breakpoints,
30         spaceBetween: 30,
31         slidesPerView: "auto",
32         effect: effect, // Set the effect type
33      };
34
35      if (effect === "fade") {
36         swiperOptions.fadeEffect = {
37            crossFade: true,
38         };
39      }
40
41      if (centerSlides) {
42         swiperOptions.slidesPerView = "auto";
43         swiperOptions.centeredSlides = true;
44      }
45
46      if (paginationEnabled) {
47         const paginationEl = swiperContainer.querySelector(".swiper-pagination");
48         if (paginationEl) {
49            swiperOptions.pagination = {
50               el: paginationEl,
51               type: paginationType,
52               dynamicBullets: true,
53               clickable: true,
54            };
55
56            // Custom pagination with numbers
57            if (paginationType === "custom") {
58               swiperOptions.pagination.renderCustom = function (swiper, current, total) {
59                  var text = "";
60                  for (let i = 1; i <= total; i++) {
61                     if (current == i) {
62                        text += `<span class="swiper-pagination-numbers swiper-pagination-numbers-active">${i}</span>`;
63                     } else {
64                        text += `<span class="swiper-pagination-numbers">${i}</span>`;
65                     }
66                  }
67                  return text;
68               };
69            }
70         }
71      }
72
73      if (navigationEnabled) {
74         swiperOptions.navigation = {
75            nextEl: ".swiper-button-next",
76            prevEl: ".swiper-button-prev",
77         };
78      } else {
79         // Add the class to hide the navigation container
80         const navigationEl = swiperContainer.querySelector(".swiper-navigation");
81         if (navigationEl) {
82            navigationEl.classList.add("swiper-navigation-hidden");
83         }
84      }
85
86      if (autoplayEnabled) {
87         swiperOptions.autoplay = {
88            delay: parseInt(autoplayDelay),
89         };
90      }
91
92      new Swiper(swiperContainer, swiperOptions);
93   });
94}
95
96initializeSwiperCarousels();