https://headlam.com/scripts/owner/core/SwiperCarousel.js?d=c4572589b4fd4063552e7bf1ad0e1c537c5d7ef9

1// Visit the following link for controlling Swiper Carousels (https://swiperjs.com/swiper-api)
2
3const swiperJs = () => {
4    // Get list of carousels on current page
5    let carousels = $(".swiper");
6
7    // Loop through each carousel
8    carousels.each((index, element) => {
9        var activeCarousel = $(element);
10        let slidesPerViewValue = activeCarousel.data("slides-per-view");
11        // works out how many slides to show at different break points depending on the users choice in umbraco
12        let dynamicSlidesPerViewLargeMobile = slidesPerViewValue > 2.5 ? Math.round(slidesPerViewValue - 2) : slidesPerViewValue;
13        let dynamicSlidesPerViewTablet = slidesPerViewValue > 2.5 ? Math.round(slidesPerViewValue - 1) : slidesPerViewValue;
14        let dynamicSlidesPerViewSmallLaptop = slidesPerViewValue > 3.5 ? Math.round(slidesPerViewValue - 1) : slidesPerViewValue;
15
16        const settings = {
17            speed: activeCarousel.data("speed"),
18            effect: activeCarousel.data("animation"),
19            fadeEffect: {
20                crossFade: true
21            },
22            direction: activeCarousel.data("direction") ? "vertical" : "horizontal",
23            autoHeight: true, 
24            autoplay: {
25                enabled: activeCarousel.data("autoplay") ? true : false,
26                delay: activeCarousel.data("autoplay-speed"),
27            },
28            loop: activeCarousel.data("loop"),
29            slidesPerGroup: activeCarousel.data("slides-per-group"),
30            slidesPerView: 1,
31            spaceBetween: 20,
32            breakpoints: {
33              576: {
34                slidesPerView: dynamicSlidesPerViewLargeMobile,
35                spaceBetween: 30,
36              },
37              768: {
38                slidesPerView: dynamicSlidesPerViewTablet,
39                spaceBetween: 35,
40              },
41              992: {
42                slidesPerView: dynamicSlidesPerViewSmallLaptop,
43                spaceBetween: 40,
44              },
45              1200: {
46                slidesPerView: activeCarousel.data("direction") ? "auto" : slidesPerViewValue,
47                spaceBetween: activeCarousel.data("spacing-between-slides"),
48              },
49            },
50            pagination: {
51                el: ".swiper-pagination",
52                enabled: activeCarousel.data("pagination"),
53                type: activeCarousel.data("type-pagination") == "" ? "bullets" : activeCarousel.data("type-pagination"),
54                clickable: activeCarousel.data("clickable-pagination"),
55                dynamicBullets: activeCarousel.data("type-of-bullets") == "dynamic" ? true : false,
56                renderBullet: function (index, className) {
57                    const formattedIndex = activeCarousel.data("type-of-bullets") == "numbered" ? String(index + 1).padStart(2, '0') : "";
58                    return `<span class="${className} pagination-index">${formattedIndex}</span>`;
59                },
60            },
61            scrollbar: {
62                el: ".swiper-scrollbar",
63                hide: activeCarousel.data("hide-scrollbar"),
64                draggable: activeCarousel.data("draggable-scrollbar")
65            },
66            navigation: {
67                enabled: activeCarousel.data("navigation"),
68                nextEl: ".swiper-button-next",
69                prevEl: ".swiper-button-prev",
70            },
71            mousewheel: activeCarousel.data("mousewheel-control"),
72            grabCursor: activeCarousel.data("grabcursor")
73        }
74        // Initialise Swiper Carousels
75        let swiperInstance = new Swiper(element, settings);
76        progressTimerBar(swiperInstance); // Pass swiper instance to progressTimerBar function
77    })
78
79}
80
81/* CODE BELOW - Dynamic progress bar - not part of the swiper carousel options, so custom code added on */
82/* To change the speed of the slide transitions, for this type of progress bar, alter the .animation-duration class in the swiperCarousel.scss file */
83const progressTimerBar = (swiper) => {
84  const progressBar = swiper.el.querySelector(".progress");
85
86  swiper.on("slideChange", function () {
87    progressBar.style.animation = "none";
88    void progressBar.offsetWidth;
89    progressBar.style.animation = null;
90    progressBar.style.animationPlayState = "paused";
91  });
92
93  progressBar.addEventListener("animationend", () => {
94    swiper.slideNext();
95    progressBar.style.animation = "none";
96    void progressBar.offsetWidth;
97    progressBar.style.animation = null;
98  });
99
100  document.querySelectorAll(".swiper.dynamicbar, .carousel-progress").forEach((item) => {
101    item.addEventListener("mouseenter", function () {
102      progressBar.style.animationPlayState = "paused";
103    });

104  });
105  document.querySelectorAll(".swiper.dynamicbar, .carousel-progress").forEach((item) => {
106    item.addEventListener("mouseleave", function () {
107      progressBar.style.animationPlayState = "running";
108    });
109  });
110};
111
112
113
114
115// Wait for DOM and files to load before manipulting
116$(window).on("load", function () {
117    swiperJs();
118    progressTimerBar();
119});