https://doctorswithafrica.org/wp-content/themes/cuamm/js/modules/mod-banner.js

1document.addEventListener('DOMContentLoaded', () => {
2    const swiperContainer = document.querySelector('.js-banner-v4-swiper');
3    const swiperWrapper = document.querySelector('.js-banner-v4-wrapper');
4    const swiperSlides = document.querySelectorAll('.js-banner-v4-slide');
5    
6    // NUOVO: Selezioniamo il contenitore di frecce e paginazione
7    const swiperControls = document.querySelector('.banner-v4-controls'); 
8    
9    if (swiperContainer) {
10        let bannerV4Swiper = null; 
11        
12        // Impostiamo il breakpoint (sotto i 1024px = mobile)
13        const mediaQuery = window.matchMedia('(max-width: 1024px)');
14
15        const handleSwiper = (e) => {
16            if (e.matches) {
17                // MOBILE: Aggiungiamo le classi di Swiper al DOM
18                swiperContainer.classList.add('swiper');
19                swiperWrapper.classList.add('swiper-wrapper');
20                swiperSlides.forEach(slide => slide.classList.add('swiper-slide'));
21                
22                // NUOVO: Mostriamo i controlli su mobile
23                if (swiperControls) swiperControls.style.display = 'flex';
24
25                // Inizializziamo lo slider con paginazione custom e frecce
26                bannerV4Swiper = new Swiper(swiperContainer, {
27                    slidesPerView: 1.1,
28                    spaceBetween: 20,
29                    pagination: {
30                        el: '.banner-v4-pagination',
31                        clickable: true,
32                        renderBullet: function (index, className) {
33                            let num = index + 1;
34                            let formattedNum = num < 10 ? '0' + num + '.' : num + '.';
35                            return '<span class="' + className + '" data-numero="' + formattedNum + '"></span>';
36                        },
37                    },
38                    navigation: {
39                        nextEl: '.banner-v4-next',
40                        prevEl: '.banner-v4-prev',
41                    }
42                });
43            } else {
44                // DESKTOP: Distruggiamo lo slider (se esiste) e puliamo il DOM
45                if (bannerV4Swiper !== null) {
46                    bannerV4Swiper.destroy(true, true);
47                    bannerV4Swiper = null;
48                }
49                
50                swiperContainer.classList.remove('swiper');
51                swiperWrapper.classList.remove('swiper-wrapper');

52                swiperSlides.forEach(slide => slide.classList.remove('swiper-slide'));
53                
54                // NUOVO: Nascondiamo i controlli su desktop
55                if (swiperControls) swiperControls.style.display = 'none';
56            }
57        };
58
59        // Ascolta il resize e inizializza
60        mediaQuery.addEventListener('change', handleSwiper);
61        handleSwiper(mediaQuery);
62    }
63});