https://www.iconcertinelparco.it/modules/mod_makenext_articoli/assets/swiper-custom.js

1// NON SERVONO PIÙ LE VARIABILI QUI SOPRA (responsiveSliderMakeNext...)
2// NON SERVE PIÙ LA MAPPA (responsiveMap)
3// Il PHP ci passa già i breakpoint esatti.
4
5function createSliderMakeNextArticolo(selettore) {
6    // Trasformiamo in oggetto jQuery se non lo è già
7    var $el = (selettore instanceof jQuery) ? selettore : jQuery(selettore);
8
9    if ($el.length === 0) return;
10
11    // 1. LEGGIAMO LA CONFIGURAZIONE DAL PHP (attributo data-makenext-config)
12    let config = $el.data('makenext-config') || {};
13
14    // 2. CONFIGURAZIONE SWIPER
15    let swiperOptions = {
16            // --- BREAKPOINTS (Responsive) ---
17            // Se l'array breakpoints è vuoto, usa il fallback a 1 colonna
18            breakpoints: config.breakpoints || {
19                0: {slidesPerView: 1, spaceBetween: 20}
20            },
21
22            // Impostazioni di default
23            slidesPerView: 1,
24            spaceBetween: 20,
25
26            // --- PARAMETRI BASE ---
27            loop: config.loop !== undefined ? config.loop : true,
28            speed: config.speed || 800,
29            autoplay: config.autoplay, // Oggetto o false
30
31            // --- UX & DESIGN (QUESTE SONO LE RIGHE NUOVE CHE MANCAVANO) ---
32            grabCursor: config.grabCursor,       // Mostra la manina se attivo da XML
33            centeredSlides: config.centeredSlides, // Centra la slide se attivo da XML
34
35            // --- ACCESSIBILITÀ (Nuovo) ---
36            // Trasformiamo il "true" del PHP nell'oggetto che piace a Swiper
37            keyboard: config.keyboard ? {
38                enabled: true,
39                onlyInViewport: true,
40            } : false,
41
42            // --- GESTIONE EFFETTI (Questa parte ce l'avevi già, è perfetta) ---
43            effect: config.effect || 'slide',
44
45            // Configurazioni specifiche
46            fadeEffect: {crossFade: true},
47            cubeEffect: {shadow: true, slideShadows: true, shadowOffset: 20, shadowScale: 0.94},
48            coverflowEffect: {rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: true},
49            flipEffect: {slideShadows: true, limitRotation: true},
50            cardsEffect: {slideShadows: true, perSlideOffset: 8, perSlideRotate: 2, rotate: true},
51            creativeEffect: config.creativeEffect || {},
52
53        // --- OBSERVER (Importante) ---
54        observer: true,
55        observeParents: true
56}
57    ;
58
59    // 3. CONFIGURAZIONE PAGINAZIONE (Pallini)
60    if (config.dots) {
61        swiperOptions.pagination = {
62            el: $el.find('.swiper-pagination')[0],
63            clickable: true,
64        };
65    } else {
66        $el.find('.swiper-pagination').hide();
67    }
68
69    // 4. CONFIGURAZIONE FRECCE
70    if (config.nav) {
71        swiperOptions.navigation = {
72            nextEl: $el.find('.swiper-button-next')[0],
73            prevEl: $el.find('.swiper-button-prev')[0],
74        };
75    } else {
76        $el.find('.swiper-button-prev, .swiper-button-next').hide();
77    }
78
79    // 5. AVVIO SWIPER
80    const swiper = new Swiper($el[0], swiperOptions);
81    return swiper;
82}