Integrazione con lo Slider

Collega Product Video allo slider JavaScript per immagini del tuo tema, in modo che le miniature video appaiano correttamente all'interno dello slider e il suo funzionamento non venga compromesso dopo l'aggiunta.

note

Disponibile dalla v3.0.0

Panoramica

Molti temi sostituiscono l'elenco predefinito di immagini prodotto con una libreria slider JavaScript — Slick, Swiper, Owl Carousel e altre. Ciascuna di queste librerie gestisce la propria struttura DOM interna e il conteggio degli slide. Quando Product Video inietta una miniatura video nella pagina, uno slider che non è a conoscenza del nuovo slide potrebbe nasconderlo, compromettere la navigazione o generare un errore JavaScript.

L'integrazione con lo slider risolve questo problema indicando al modulo quale libreria slider utilizza il tuo tema. Una volta selezionata, il modulo carica un livello di compatibilità che inietta le miniature video nel formato atteso dallo slider. Puoi anche fornire selettori jQuery per gli elementi contenitore specifici, aggiungere HTML wrapper attorno a ogni slide iniettato, sincronizzare due slider che si muovono insieme e forzare lo slider ad aggiornare il proprio stato interno dopo l'aggiunta dei nuovi slide.

Devi configurare questa sezione solo se la galleria immagini prodotto del tuo tema utilizza una delle librerie slider supportate. Se il tuo tema utilizza un semplice elenco di immagini senza slider, lascia Custom Image Slider impostato su none e salta questa sezione.

Configurazione

1. Vai su Moduli > Gestione moduli, trova Product Video e clicca su Configura.
2. Apri la scheda Compatibilità tema.
3. Scorri fino alla sezione Configurazione Slider.

Campo	Valori	Predefinito	Descrizione
Custom Image Slider	None, Slick Slider, BX Slider, Owl Carousel Old (precedente alla 2.0), Owl Carrousel, Swiper Slider, Flickity Carousel, Light Slider, Bootstrap 5 Carousel	None	La libreria slider utilizzata dal tuo tema. La selezione di una libreria carica il livello di compatibilità corretto per quello slider.
Selector for the slider's thumbnails container	Stringa selettore jQuery	—	Punta all'elemento contenitore utilizzato dallo slider per le miniature. Lascia vuoto se il tuo slider viene rilevato automaticamente. Vedi i valori predefiniti per libreria di seguito.
Selector for the Main Image's slider	Stringa selettore jQuery	—	Punta all'elemento slider dell'immagine principale (grande) se il tuo tema usa uno slider separato per essa. Compila solo se esiste uno slider dedicato all'immagine principale.
Main Image's Slider HTML (before)	Stringa HTML grezza	—	HTML che il modulo inietta immediatamente prima di ogni slide immagine. Usalo quando il tuo slider richiede un elemento wrapper attorno a ogni slide.
Main Image's Slider HTML (after)	Stringa HTML grezza	—	HTML che il modulo inietta immediatamente dopo ogni slide immagine. Da usare in coppia con il campo before per aprire e chiudere i tag wrapper.
Sync thumbnail and image sliders	Sì / No	No	Se attivato, selezionare una miniatura sposta anche lo slider dell'immagine principale nella posizione corrispondente. Attiva solo se il tuo tema usa una coppia sincronizzata slider miniature + slider immagine principale.
Refresh slider after adding the items	Sì / No	No	Forza la libreria slider a re-inizializzarsi dopo l'iniezione delle miniature video. Necessario per Slick Slider e Owl Carousel v2 quando i nuovi slide non appaiono.

Quando Sync thumbnail and image sliders è attivato, il modulo disabilita automaticamente la funzione autosize, poiché gli slider sincronizzati gestiscono le proprie dimensioni. Un messaggio di conferma nel Back Office ti ricorderà questa cosa, se applicabile.

Come Funziona

Quando selezioni una libreria slider, il modulo passa alla modalità di iniezione consapevole dello slider. Invece di aggiungere elementi miniatura a un semplice elenco, punta al selettore da te indicato e inserisce gli slide in un formato che lo slider può renderizzare.

I campi HTML before e after ti permettono di racchiudere ogni slide iniettato nel markup richiesto dalla tua variante di slider — per esempio, Bootstrap 5 Carousel richiede <div class="carousel-item"> attorno a ogni slide.

Se Refresh slider è attivato, il modulo attiva l'evento di re-inizializzazione appropriato dopo l'iniezione. Per Slick, questo significa chiamare slickAdd o ri-attivare l'inizializzazione. Per Owl Carousel v2, viene inviato refresh.owl.carousel. Questo passaggio è ciò che permette allo slider di ricalcolare i propri slide e mostrare i punti di navigazione o le frecce per il video appena aggiunto.

Se Sync è attivato, il modulo sposta anche lo slider dell'immagine principale in sincronia ogni volta che una miniatura video viene selezionata dalla striscia delle miniature.

Impostazioni Predefinite per Libreria

Slick Slider

• Selettore contenitore miniature: Un selettore che punta all'elemento con la classe slick-slider, ad esempio .slick-slider o .product-images .slick-slider.
• Refresh slider: Attiva questa opzione. Slick non rileva automaticamente i nuovi slide — richiede una chiamata di re-inizializzazione dopo l'iniezione.
• Sync: Attiva se il tuo tema utilizza una configurazione Slick sincronizzata principale/miniature, e compila entrambi i selettori.

BX Slider

• Selettore contenitore miniature: Il selettore per l'elemento <ul> su cui è inizializzato BX Slider.
• Refresh slider: In genere non necessario — BX Slider gestisce meglio i contenuti dinamici rispetto a Slick.

Owl Carousel Old (precedente alla 2.0)

• Selettore contenitore miniature: Usa #thumbs_list_frame o il selettore specifico del contenitore Owl definito nel tuo tema.
• Refresh slider: Non necessario per Owl v1.

Owl Carrousel (v2)

• Selettore contenitore miniature: Il selettore per il div contenitore di Owl v2.
• Refresh slider: Attiva questa opzione. Owl v2 richiede un evento trigger('refresh.owl.carousel') dopo l'aggiunta di nuovi elementi.

Swiper Slider

• Selettore contenitore miniature: Il selettore per l'elemento DOM con la classe .swiper-container (o .swiper in Swiper 8+).
• Selettore immagine principale: Compilalo se esiste un'istanza Swiper separata per l'immagine principale.
• Sync: Attiva se il tuo tema usa la sincronizzazione nativa delle miniature di Swiper.

Flickity Carousel

• Selettore contenitore miniature: Il selettore per l'elemento inizializzato con Flickity.
• Refresh slider: Di solito non necessario — Flickity gestisce gli elementi aggiunti senza una re-inizializzazione completa.

Light Slider

• Selettore contenitore miniature: Il selettore per l'elemento contenitore di Light Slider.

Bootstrap 5 Carousel

• Selettore contenitore miniature: Il selettore per il contenitore .carousel.
• Main Image's Slider HTML (before): Inserisci <div class="carousel-item"> — Bootstrap 5 richiede questo wrapper attorno a ogni slide.
• Main Image's Slider HTML (after): Inserisci </div> per chiudere il wrapper.

Esempi d'Uso

Esempio: tema con Slick Slider e striscia miniature

Il tuo tema usa Slick sia per l'immagine principale che per la striscia miniature sottostante, sincronizzate.

1. Imposta Custom Image Slider su Slick Slider.
2. In Selector for the slider's thumbnails container, inserisci .product-images .slick-slider (adatta al markup del tuo tema).
3. In Selector for the Main Image's slider, inserisci .product-cover .slick-slider.
4. Attiva Sync thumbnail and image sliders.
5. Attiva Refresh slider after adding the items.
6. Salva. Le miniature video appariranno ora come slide Slick sia nella striscia miniature che nell'area immagine principale, sincronizzate.

Esempio: Swiper Slider senza sincronizzazione

Il tuo tema usa un singolo Swiper per le miniature, senza uno slider separato per l'immagine principale.

1. Imposta Custom Image Slider su Swiper Slider.
2. In Selector for the slider's thumbnails container, inserisci .swiper-container o il selettore più specifico usato dal tuo tema.
3. Lascia vuoto Selector for the Main Image's slider.
4. Lascia Sync disabilitato.
5. Salva. Il modulo aggiunge le miniature video come slide Swiper e il carousel funziona normalmente.

Esempio: Bootstrap 5 Carousel

Il tuo tema racchiude ogni immagine prodotto in un elemento carousel Bootstrap 5.

1. Imposta Custom Image Slider su Bootstrap 5 Carousel.
2. In Main Image's Slider HTML (before), inserisci <div class="carousel-item">.
3. In Main Image's Slider HTML (after), inserisci </div>.
4. Imposta Selector for the slider's thumbnails container su .carousel.
5. Salva. Ogni miniatura video iniettata viene racchiusa in un elemento carousel corretto e il carousel Bootstrap la renderizza correttamente.

Note Importanti

• Il menu a tendina Custom Image Slider elenca solo le librerie supportate. Se il tuo tema usa uno slider personalizzato o proprietario non presente nell'elenco, scegli la corrispondenza più vicina e adatta manualmente i campi selettore e wrapper HTML.
• Owl Carousel ha due voci separate: Owl Carousel Old (v1, precedente alla 2.0) e Owl Carrousel (v2). Seleziona la versione corrispondente al tuo tema. Usare la versione sbagliata farà sì che il trigger di refresh non abbia alcun effetto.
• Questa sezione è rilevante solo quando è in uso il posizionamento nella galleria immagini. Se mostri i video solo nel pannello laterale, nella scheda contenuto o negli elenchi prodotti, l'integrazione con lo slider non ha effetto.
• Quando Sync thumbnail and image sliders è attivato, Autosize viene automaticamente disabilitato per il player video. È intenzionale — gli slider sincronizzati gestiscono le dimensioni autonomamente e autosize interferisce.
• Il toggle Refresh slider aggiunge un passaggio di re-inizializzazione che può causare un breve sfarfallio visivo al caricamento della pagina prodotto e durante il re-rendering dello slider. È un comportamento normale.
• I campi selettore accettano qualsiasi selettore jQuery valido. Testa i selettori nella console sviluppatore del browser con $('tuo-selettore') per confermare che corrispondano all'elemento corretto prima di salvare.

Risoluzione dei Problemi

Problema	Soluzione
La miniatura video viene iniettata ma non è visibile nello slider	Attiva Refresh slider after adding the items. Il conteggio interno degli slide dello slider non è aggiornato e nasconde il nuovo slide.
Lo slider si rompe completamente dopo l'aggiunta della miniatura video	Il markup dello slide iniettato dal modulo non corrisponde a quello atteso dallo slider. Verifica quale HTML racchiude ogni slide immagine nel tuo tema, poi aggiungi il tag di apertura in Main Image's Slider HTML (before) e il tag di chiusura in Main Image's Slider HTML (after).
La striscia miniature scorre ma l'immagine principale non la segue	Attiva Sync thumbnail and image sliders e assicurati che sia il selettore delle miniature sia quello dell'immagine principale siano compilati e puntino agli elementi corretti.
Nessuna opzione slider nell'elenco corrisponde al mio tema	Seleziona la libreria più simile a quella usata dal tuo tema, poi adatta manualmente selettori e wrapper HTML. Se il problema persiste, imposta Custom Image Slider su none e affidati ai semplici selettori CSS nella sezione Compatibilità tema.
La miniatura video appare completamente fuori dallo slider	Il Selector for the slider's thumbnails container non è corretto o è vuoto. Apri gli strumenti sviluppatore del browser, ispeziona il contenitore slider, copia un selettore univoco e incollalo in quel campo.
Lo slider sfarfalla o si re-anima ad ogni caricamento di pagina	È causato dal passaggio Refresh slider. È un comportamento atteso. Se lo sfarfallio è inaccettabile, contatta lo sviluppatore del tuo tema riguardo a un hook nativo che si attiva al termine dell'inizializzazione dello slider, poi disabilita il toggle di refresh.

Domande Frequenti

Come faccio a sapere quale libreria slider usa il mio tema?

Apri la pagina prodotto del tuo negozio, fai clic destro sulla galleria immagini e scegli "Ispeziona elemento". Osserva le classi CSS sull'elemento contenitore dello slider — nomi di classe come slick-initialized, swiper-container, owl-carousel o flickity-enabled identificano la libreria. Puoi anche controllare i file JavaScript del tuo tema per il nome della libreria.

Devo configurare questa sezione se i video vengono già visualizzati correttamente?

No. Se le miniature video appaiono correttamente nel tuo slider senza alcuna configurazione, lascia tutto al valore predefinito (nessuno slider selezionato). Le impostazioni dello slider sono necessarie solo quando le miniature sono assenti, nascoste o causano il malfunzionamento dello slider.

Qual è la differenza tra "Owl Carousel Old" e "Owl Carrousel" nel menu a tendina?

"Owl Carousel Old" si riferisce a Owl Carousel versione 1 (precedente alla 2.0). "Owl Carrousel" si riferisce a Owl Carousel versione 2 e successive. La versione 2 usa un'API diversa per la re-inizializzazione e richiede l'attivazione del toggle Refresh slider. Se selezioni la versione sbagliata, il trigger di refresh non funzionerà e i nuovi slide potrebbero non apparire.

Posso usare l'integrazione con lo slider insieme alle modalità di visualizzazione nel pannello laterale o nella scheda contenuto?

Sì, ma l'integrazione con lo slider influisce solo sul posizionamento nella galleria immagini. Se mostri anche i video nel pannello laterale o nella scheda contenuto, quei posizionamenti sono indipendenti dallo slider e non richiedono la configurazione dello slider.

Il mio tema usa Swiper 8 — quale classe devo usare come selettore contenitore?

Swiper 8 ha cambiato la classe del contenitore principale da .swiper-container a .swiper. Usa .swiper come selettore del contenitore miniature quando il tuo tema usa Swiper 8 o versioni successive.

Attivare Sync influisce sulla riproduzione del video?

Sync controlla solo la posizione dello slider — mantiene la striscia miniature e lo slider dell'immagine principale in sincronia quando si fa clic su una miniatura. Non influisce sulla riproduzione video né sul player video stesso.

Funzionalità Correlate

• Compatibilità tema — Selettori CSS principali e impostazioni generali di integrazione con il tema
• Posizionamento nella galleria immagini — Impostazioni di visualizzazione della galleria che funzionano insieme alla configurazione dello slider