https://mediciconlafrica.org/wp-content/themes/cuamm/js/modules/mod-list-carousel.js

1 document.addEventListener('DOMContentLoaded', function() {
2
3    const sections = document.querySelectorAll('.mod-list-carousel');
4
5    if (!sections.length) return;
6
7    sections.forEach(section => {
8
9        const carousel = section.querySelector('.swiper-list-carousel');
10
11        if (!carousel) return;
12
13        let slidesPerViewDesk = 3;
14        if(carousel.classList.contains('cols-2')) slidesPerViewDesk = 2;
15        if(carousel.classList.contains('cols-4')) slidesPerViewDesk = 4;
16
17        new Swiper(carousel, {
18            slidesPerView: 1.1,
19            spaceBetween: 20,
20            loop: false,
21
22            pagination: {
23                el: section.querySelector('.swiper-pagination-custom'),
24                clickable: true,
25                renderBullet: function (index, className) {
26                    let num = index + 1;
27                    let formattedNum = num < 10 ? '0' + num + '.' : num + '.';
28                    return '<span class="' + className + '">' + formattedNum + '</span>';
29                },
30            },
31
32            navigation: {
33                nextEl: section.querySelector('.swiper-button-next'),
34                prevEl: section.querySelector('.swiper-button-prev'),
35            },
36
37            breakpoints: {
38                768: { slidesPerView: 2 },
39                1024: { slidesPerView: slidesPerViewDesk }
40            }
41
42        });
43
44    });
45
46});