https://www.accademiamoda.it/wp-content/themes/iuad-theme/js/home-carousel.js?ver=1.0.0

1/**
2 * Home Page Carousels Initialization
3 * 
4 * Questo script inizializza i carousel Swiper per i dipartimenti e le news
5 * nella home page, con particolare attenzione alla compatibilità iOS.
6 */
7
8(function($) {
9    'use strict';
10    
11    // Funzione per distruggere e reinizializzare i carousel esistenti
12    function reinitCarousels() {
13        // Distruggi i carousel esistenti
14        const existingDepartmentsSwiper = document.querySelector('.departments__carousel')?.swiper;
15        const existingNewsSwiper = document.querySelector('.news__carousel')?.swiper;
16        
17        if (existingDepartmentsSwiper) {
18            //console.log('Distruggo carousel dipartimenti esistente');
19            existingDepartmentsSwiper.destroy(true, true);
20        }
21        
22        if (existingNewsSwiper) {
23            //console.log('Distruggo carousel news esistente');
24            existingNewsSwiper.destroy(true, true);
25        }
26        
27        // Inizializza nuovi carousel
28        initCarousels();
29    }
30    
31    // Funzione per inizializzare i carousel
32    function initCarousels() {
33        //console.log('Inizializzazione carousel home page...');
34        
35        // Verifica se Swiper è disponibile
36        if (typeof Swiper === 'undefined') {
37            console.error('Swiper non è disponibile. Assicurati di includere la libreria Swiper.');
38            return;
39        } else {
40            //console.log('Swiper è disponibile:', Swiper.version);
41        }
42        
43        // Opzioni comuni per i carousel
44        const commonOptions = {
45            grabCursor: true,
46            preloadImages: true,
47            watchSlidesProgress: true,
48            updateOnImagesReady: true,
49            watchOverflow: true,
50            touchStartPreventDefault: false, // Importante per iOS
51            touchMoveStopPropagation: false, // Importante per iOS
52            navigation: {
53                nextEl: '.swiper-button-next',
54                prevEl: '.swiper-button-prev',
55            },
56            pagination: {
57                el: '.swiper-pagination',
58                clickable: true,
59            },
60            on: {
61                init: function() {
62                    //console.log('Swiper inizializzato');
63                    // Fix per iOS: forza il ricalcolo delle dimensioni dopo l'inizializzazione
64                    setTimeout(() => {
65                        this.update();
66                    }, 100);
67                }
68            }
69        };
70        
71        // Inizializza il carousel dei dipartimenti
72        initDepartmentsCarousel(commonOptions);
73        
74        // Inizializza il carousel delle news
75        initNewsCarousel(commonOptions);
76    }
77    
78    // Funzione per inizializzare il carousel dei dipartimenti
79    function initDepartmentsCarousel(commonOptions) {
80        //console.log('Cerco il carousel dei dipartimenti...');
81        const departmentsCarousel = document.querySelector('.departments__carousel');
82        
83        if (!departmentsCarousel) {
84            //console.log('Carousel dei dipartimenti non trovato');
85            return;
86        }
87        
88        // Salva le card originali prima di pulire
89        const originalCards = Array.from(departmentsCarousel.querySelectorAll('.department-card'));
90        
91        if (originalCards.length === 0) {
92            //console.log('Nessuna card trovata nel carousel dei dipartimenti');
93            return;
94        }
95        
96        // Pulisci completamente il contenuto del carousel
97        departmentsCarousel.innerHTML = '';
98        
99        // Aggiungi le classi Swiper necessarie
100        departmentsCarousel.classList.add('swiper');
101        const wrapper = document.createElement('div');
102        wrapper.classList.add('swiper-wrapper');
103        
104        // Usa le card originali salvate
105        originalCards.forEach(card => {
106            const slide = document.createElement('div');
107            slide.classList.add('swiper-slide');
108            // Non cloniamo più i nodi, usiamo gli originali
109            slide.appendChild(card);
110            wrapper.appendChild(slide);
111        });
112        
113        // Aggiungi il wrapper al carousel pulito
114        departmentsCarousel.appendChild(wrapper);
115        
116        // Aggiungi la paginazione
117        departmentsCarousel.insertAdjacentHTML('beforeend', `
118            <div class="swiper-pagination"></div>
119        `);
120        
121        // Opzioni specifiche per il carousel dei dipartimenti
122        const departmentsOptions = {
123            ...commonOptions,
124            slidesPerView: 'auto',
125            spaceBetween: 8,
126            centeredSlides: false,
127            loop: false, // Disabilitiamo il loop
128            loopedSlides: null, // Rimuoviamo i looped slides
129            navigation: false,
130            pagination: {
131                el: '.swiper-pagination',
132                clickable: true,
133            },
134            watchOverflow: true,

135            normalizeSlideIndex: false,
136            cssMode: true,
137            breakpoints: {
138                576: {
139                    slidesPerView: 'auto',
140                    spaceBetween: 8,
141                },
142                992: {
143                    slidesPerView: 'auto',
144                    spaceBetween: 8,
145                },
146                1200: {
147                    slidesPerView: 'auto',
148                    spaceBetween: 8,
149                }
150            }
151        };
152        
153        // Inizializza Swiper
154        try {
155            const departmentsSwiper = new Swiper(departmentsCarousel, departmentsOptions);
156            //console.log('Carousel dei dipartimenti inizializzato:', departmentsSwiper);
157        } catch (error) {
158            console.error('Errore nell\'inizializzazione del carousel dei dipartimenti:', error);
159        }
160    }
161    
162    // Funzione per inizializzare il carousel delle news
163    function initNewsCarousel(commonOptions) {
164        //console.log('Cerco il carousel delle news...');
165        const newsCarousel = document.querySelector('.news__carousel');
166        
167        if (!newsCarousel) {
168            //console.log('Carousel delle news non trovato');
169            return;
170        }
171        
172        // Aggiungi le classi Swiper necessarie
173        newsCarousel.classList.add('swiper');
174        const wrapper = document.createElement('div');
175        wrapper.classList.add('swiper-wrapper');
176        
177        // Sposta tutte le card nel wrapper
178        const cards = newsCarousel.querySelectorAll('.news-card');
179        cards.forEach(card => {
180            const slide = document.createElement('div');
181            slide.classList.add('swiper-slide');
182            slide.appendChild(card);
183            wrapper.appendChild(slide);
184        });
185        
186        // Svuota il carousel e inserisci il wrapper
187        newsCarousel.innerHTML = '';
188        newsCarousel.appendChild(wrapper);
189        
190        // Aggiungi la paginazione
191        newsCarousel.insertAdjacentHTML('beforeend', `
192            <div class="swiper-pagination"></div>
193        `);
194        
195        // Opzioni specifiche per il carousel delle news
196        const newsOptions = {
197            ...commonOptions,
198            slidesPerView: 'auto',
199            spaceBetween: 8,
200            centeredSlides: false,
201            loop: false,
202            navigation: false,
203            pagination: {
204                el: '.swiper-pagination',
205                clickable: true,
206                bulletClass: 'swiper-pagination-bullet',
207                bulletActiveClass: 'swiper-pagination-bullet-active',
208                renderBullet: function (index, className) {
209                    return `<span class="${className}"></span>`;
210                }
211            },
212            breakpoints: {
213                576: {
214                    slidesPerView: 'auto',
215                    spaceBetween: 8,
216                },
217                992: {
218                    slidesPerView: 'auto',
219                    spaceBetween: 8,
220                    centeredSlides: false,
221                }
222            }
223        };
224        
225        // Inizializza Swiper
226        try {
227            const newsSwiper = new Swiper(newsCarousel, newsOptions);
228            //console.log('Carousel delle news inizializzato:', newsSwiper);
229        } catch (error) {
230            console.error('Errore nell\'inizializzazione del carousel delle news:', error);
231        }
232    }
233    
234    // Inizializza i carousel quando il documento è pronto
235    $(document).ready(function() {
236        //console.log('Documento pronto, inizializzazione carousel...');
237        initCarousels();
238        
239        // Reinizializza i carousel quando cambia l'orientamento del dispositivo
240        window.addEventListener('orientationchange', function() {
241            //console.log('Orientamento cambiato, reinizializzazione carousel...');
242            setTimeout(reinitCarousels, 150);
243        });
244    });
245    
246})(jQuery);