https://www.dmcr.go.th/front/template/default/public/js/wg-statistical.js?v=2023202602101790920374

1const wgStatisticalItem = new Swiper(".wg-statistical-item", {
2    speed: 1500,
3    autoplay: {
4        delay: 5000,
5        disableOnInteraction: false,
6    },
7    freeMode: true,
8    sticky: true,
9    navigation: {
10        nextEl: ".wg-statistical .swiper-button-next",
11        prevEl: ".wg-statistical .swiper-button-prev",
12    },
13    on: {
14        slideChange: function () {
15            let slidesPerGroup = 5; // Number of slides to group
16            // Remove the class from all slides
17            document.querySelectorAll('.swiper-slide').forEach(function (slide) {
18                slide.classList.remove('active-slide-group');
19            });
20
21            // Add the class to the active slide and the group of slides around it
22            for (let i = 0; i < slidesPerGroup; i++) {
23                let index = (wgStatisticalItem.activeIndex + i + wgStatisticalItem.slides.length) % wgStatisticalItem.slides.length;
24                wgStatisticalItem.slides[index].classList.add('active-slide-group');
25            }
26        },
27    },
28    breakpoints: {
29        0: {
30            spaceBetween: 0,
31            loop: false,
32            slidesPerView: 2,
33            slidesPerGroup: 2,
34            allowTouchMove: true,
35            pagination: {
36                el: ".wg-statistical-item .swiper-pagination.item",
37                clickable: true,
38            },
39        },
40        575: {
41            spaceBetween: 0,
42            loop: false,
43            slidesPerView: 3,
44            slidesPerGroup: 3,
45            allowTouchMove: true,
46            pagination: {
47                el: ".wg-statistical-item .swiper-pagination.item",
48                clickable: true,
49            },
50        },
51        767: {
52            spaceBetween: 8,
53            loop: false,
54            slidesPerView: 5,
55            slidesPerGroup: 5,
56            allowTouchMove: false,
57            watchSlidesProgress: true,
58            pagination: {
59                el: ".wg-statistical .swiper-pagination.main",
60                clickable: true,
61            },
62        }
63    },
64});
65const wgStatisticalBg = new Swiper(".wg-statistical-bg", {
66    spaceBetween: 0,
67    effect: "fade",
68    // slidesPerGroup: 5,
69    allowTouchMove: false,
70    // thumbs: {
71    // swiper: wgStatisticalItem,
72    // },
73    speed: 1500,
74    autoplay: {
75        delay: 5000,
76        disableOnInteraction: false,
77    },
78    pagination: {
79        el: ".wg-statistical .swiper-pagination.main",
80        clickable: true,
81    },
82    navigation: {
83        nextEl: ".wg-statistical .swiper-button-next",
84        prevEl: ".wg-statistical .swiper-button-prev",
85    },
86    breakpoints: {
87        0: {
88            loop: true,
89            pagination: {
90                clickable: false,
91            },
92        },
93        767: {
94            loop: false,
95            pagination: {
96                clickable: true,
97            },
98        }
99    },
100});
101const wgStatisticalGraphic = new Swiper(".wg-statistical-graphic", {
102    spaceBetween: 0,
103    allowTouchMove: false,
104    speed: 1500,
105    autoplay: {
106        delay: 5000,
107        disableOnInteraction: false,
108    },
109    pagination: {
110        el: ".wg-statistical .swiper-pagination.main",
111        clickable: true,
112    },
113    navigation: {
114        nextEl: ".wg-statistical .swiper-button-next",
115        prevEl: ".wg-statistical .swiper-button-prev",
116    },
117    breakpoints: {
118        0: {
119            loop: true,
120            pagination: {
121                clickable: false,
122            },
123        },
124        767: {
125            loop: false,
126            pagination: {
127                clickable: true,
128            },
129        }
130    },
131});