Intégration du slider

Connecte Product Video au slider d'images JavaScript de votre thème afin que les vignettes vidéo s'affichent correctement dans le slider et que celui-ci reste fonctionnel après leur ajout.

remarque

Disponible depuis la v3.0.0

Vue d'ensemble

De nombreux thèmes remplacent la liste d'images produit par défaut par une bibliothèque de slider JavaScript — Slick, Swiper, Owl Carousel, et d'autres. Chacune de ces bibliothèques gère sa propre structure DOM interne et son propre comptage de slides. Lorsque Product Video injecte une vignette vidéo dans la page, un slider qui n'a pas connaissance du nouveau slide peut le masquer, casser sa navigation ou générer une erreur JavaScript.

L'intégration du slider résout ce problème en indiquant au module quelle bibliothèque de slider votre thème utilise. Une fois sélectionnée, le module charge une couche de compatibilité qui injecte les vignettes vidéo dans le format attendu par le slider. Vous pouvez également fournir des sélecteurs jQuery pour les éléments conteneurs spécifiques, ajouter du HTML d'encapsulation autour de chaque slide injecté, synchroniser deux sliders qui se déplacent ensemble, et forcer le slider à actualiser son état interne après l'ajout des nouveaux slides.

Vous n'avez besoin de configurer cette section que si la galerie d'images produit de votre thème utilise l'une des bibliothèques de slider prises en charge. Si votre thème utilise une liste d'images simple sans slider, laissez Custom Image Slider sur aucun et ignorez cette section.

Configuration

1. Accédez à Modules > Gestionnaire de modules, trouvez Product Video et cliquez sur Configurer.
2. Ouvrez l'onglet Compatibilité du thème.
3. Faites défiler jusqu'à la section Configuration du slider.

Champ	Valeurs	Défaut	Description
Custom Image Slider	None, Slick Slider, BX Slider, Owl Carousel Old (prior to 2.0), Owl Carrousel, Swiper Slider, Flickity Carousel, Light Slider, Bootstrap 5 Carousel	None	La bibliothèque de slider utilisée par votre thème. La sélection d'une bibliothèque charge la couche de compatibilité adaptée à ce slider.
Selector for the slider's thumbnails container	Chaîne de sélecteur jQuery	—	Pointe vers l'élément conteneur utilisé par le slider pour les vignettes. Laissez vide si votre slider est détecté automatiquement. Voir les valeurs par défaut par bibliothèque ci-dessous.
Selector for the Main Image's slider	Chaîne de sélecteur jQuery	—	Pointe vers l'élément du slider d'image principale (grande image) si votre thème utilise un slider distinct à cet endroit. Ne remplissez ce champ que s'il existe un slider d'image principale distinct.
Main Image's Slider HTML (before)	Chaîne HTML brute	—	HTML que le module injecte immédiatement avant chaque slide d'image. Utilisez ce champ lorsque votre slider nécessite un élément d'encapsulation autour de chaque item de slide.
Main Image's Slider HTML (after)	Chaîne HTML brute	—	HTML que le module injecte immédiatement après chaque slide d'image. À associer au champ before pour ouvrir et fermer les balises d'encapsulation.
Sync thumbnail and image sliders	Yes / No	No	Lorsqu'activé, la sélection d'une vignette déplace également le slider d'image principale vers la position correspondante. À activer uniquement si votre thème utilise une paire slider vignettes + image principale synchronisée.
Refresh slider after adding the items	Yes / No	No	Force la bibliothèque de slider à se réinitialiser après l'injection des vignettes vidéo. Requis pour Slick Slider et Owl Carousel v2 lorsque les nouveaux slides n'apparaissent pas.

Lorsque Sync thumbnail and image sliders est activé, le module désactive automatiquement la fonctionnalité de redimensionnement automatique, car les sliders synchronisés gèrent eux-mêmes leur dimensionnement. Un message de confirmation dans le Back Office vous en informera si cela s'applique.

Fonctionnement

Lorsque vous sélectionnez une bibliothèque de slider, le module passe en mode d'injection compatible slider. Au lieu d'ajouter des éléments de vignettes à une liste simple, il cible le sélecteur que vous fournissez et insère les slides dans un format que le slider peut rendre.

Les champs HTML before et after vous permettent d'encapsuler chaque slide injecté dans le balisage requis par votre variante de slider — par exemple, Bootstrap 5 Carousel nécessite <div class="carousel-item"> autour de chaque slide.

Si Refresh slider est activé, le module déclenche l'événement de réinitialisation approprié après l'injection. Pour Slick, cela signifie appeler slickAdd ou redéclencher l'initialisation. Pour Owl Carousel v2, il envoie refresh.owl.carousel. Cette étape est ce qui permet au slider de recompter ses slides et d'afficher les points de navigation ou les flèches pour la vidéo nouvellement ajoutée.

Si Sync est activé, le module déplace également le slider d'image principale en même temps qu'une vignette vidéo est sélectionnée dans la bande de vignettes.

Valeurs par défaut par bibliothèque

Slick Slider

• Sélecteur du conteneur de vignettes : Un sélecteur pointant vers l'élément avec la classe slick-slider, par exemple .slick-slider ou .product-images .slick-slider.
• Refresh slider : Activez cette option. Slick ne détecte pas automatiquement les nouveaux slides — il nécessite un appel de réinitialisation après l'injection.
• Sync : Activez si votre thème utilise une configuration Slick principale/vignettes synchronisée, et remplissez les deux sélecteurs.

BX Slider

• Sélecteur du conteneur de vignettes : Le sélecteur de l'élément <ul> sur lequel BX Slider est initialisé.
• Refresh slider : Généralement non nécessaire — BX Slider gère mieux le contenu dynamique que Slick.

Owl Carousel Old (antérieur à 2.0)

• Sélecteur du conteneur de vignettes : Utilisez #thumbs_list_frame ou le sélecteur de conteneur Owl spécifique défini par votre thème.
• Refresh slider : Non nécessaire pour Owl v1.

Owl Carrousel (v2)

• Sélecteur du conteneur de vignettes : Le sélecteur du div conteneur Owl v2.
• Refresh slider : Activez cette option. Owl v2 nécessite un événement trigger('refresh.owl.carousel') après l'ajout de nouveaux items.

Swiper Slider

• Sélecteur du conteneur de vignettes : Le sélecteur de l'élément DOM avec la classe .swiper-container (ou .swiper dans Swiper 8+).
• Sélecteur de l'image principale : Remplissez ce champ s'il existe une instance Swiper distincte pour l'image principale.
• Sync : Activez si votre thème utilise la synchronisation de galerie de vignettes intégrée de Swiper.

Flickity Carousel

• Sélecteur du conteneur de vignettes : Le sélecteur de l'élément initialisé par Flickity.
• Refresh slider : Généralement non nécessaire — Flickity gère les items ajoutés sans réinitialisation complète.

Light Slider

• Sélecteur du conteneur de vignettes : Le sélecteur de l'élément conteneur Light Slider.

Bootstrap 5 Carousel

• Sélecteur du conteneur de vignettes : Le sélecteur du conteneur .carousel.
• Main Image's Slider HTML (before) : Entrez <div class="carousel-item"> — Bootstrap 5 nécessite cet encapsuleur autour de chaque slide.
• Main Image's Slider HTML (after) : Entrez </div> pour fermer l'encapsuleur.

Exemples d'utilisation

Exemple : thème Slick Slider avec bande de vignettes

Votre thème utilise Slick pour l'image principale et la bande de vignettes en dessous, synchronisées.

1. Réglez Custom Image Slider sur Slick Slider.
2. Dans Selector for the slider's thumbnails container, entrez .product-images .slick-slider (ajustez selon le balisage de votre thème).
3. Dans Selector for the Main Image's slider, entrez .product-cover .slick-slider.
4. Activez Sync thumbnail and image sliders.
5. Activez Refresh slider after adding the items.
6. Enregistrez. Les vignettes vidéo apparaissent désormais comme des slides Slick dans la bande de vignettes et dans la zone d'image principale, en synchronisation.

Exemple : Swiper Slider sans synchronisation

Votre thème utilise un seul Swiper pour les vignettes, sans slider d'image principale distinct.

1. Réglez Custom Image Slider sur Swiper Slider.
2. Dans Selector for the slider's thumbnails container, entrez .swiper-container ou le sélecteur plus précis utilisé par votre thème.
3. Laissez Selector for the Main Image's slider vide.
4. Laissez Sync désactivé.
5. Enregistrez. Le module ajoute les vignettes vidéo comme slides Swiper et le carrousel fonctionne normalement.

Exemple : Bootstrap 5 Carousel

Votre thème encapsule chaque image produit dans un item de carrousel Bootstrap 5.

1. Réglez Custom Image Slider sur Bootstrap 5 Carousel.
2. Dans Main Image's Slider HTML (before), entrez <div class="carousel-item">.
3. Dans Main Image's Slider HTML (after), entrez </div>.
4. Réglez Selector for the slider's thumbnails container sur .carousel.
5. Enregistrez. Chaque vignette vidéo injectée est encapsulée dans un item de carrousel approprié et le carrousel Bootstrap l'affiche correctement.

Remarques importantes

• La liste déroulante Custom Image Slider répertorie uniquement les bibliothèques prises en charge. Si votre thème utilise un slider personnalisé ou propriétaire absent de la liste, choisissez la correspondance la plus proche et ajustez manuellement les champs de sélecteur et d'encapsuleur HTML.
• Owl Carousel dispose de deux entrées distinctes : Owl Carousel Old (v1, antérieur à 2.0) et Owl Carrousel (v2). Sélectionnez la version qui correspond à votre thème. Utiliser la mauvaise version entraînera l'inefficacité du déclencheur de rafraîchissement.
• Cette section n'est pertinente que lorsque le placement dans la galerie d'images est utilisé. Si vous affichez des vidéos uniquement dans le panneau latéral, l'onglet de contenu ou les listes de produits, l'intégration du slider n'a aucun effet.
• Lorsque Sync thumbnail and image sliders est activé, Autosize est automatiquement désactivé pour le lecteur vidéo. C'est intentionnel — les sliders synchronisés contrôlent eux-mêmes le dimensionnement et le redimensionnement automatique interfère.
• La bascule Refresh slider ajoute une étape de réinitialisation qui peut provoquer un bref scintillement visuel lors du chargement de la page produit et du nouveau rendu du slider. C'est un comportement normal.
• Les champs de sélecteur acceptent tout sélecteur jQuery valide. Testez les sélecteurs dans la console de développement de votre navigateur avec $('votre-sélecteur') pour confirmer qu'ils correspondent au bon élément avant d'enregistrer.

Résolution des problèmes

Problème	Solution
La vignette vidéo est injectée mais n'est pas visible dans le slider	Activez Refresh slider after adding the items. Le comptage interne des slides du slider est obsolète et masque le nouveau slide.
Le slider se casse complètement après l'ajout de la vignette vidéo	Le balisage de slide injecté par le module ne correspond pas à ce qu'attend le slider. Vérifiez quel HTML encapsule chaque slide d'image dans votre thème, puis ajoutez la balise ouvrante dans Main Image's Slider HTML (before) et la balise fermante dans Main Image's Slider HTML (after).
La bande de vignettes défile mais l'image principale ne suit pas	Activez Sync thumbnail and image sliders et assurez-vous que le sélecteur de vignettes et le sélecteur d'image principale sont tous deux renseignés et pointent vers les bons éléments.
Aucune option de slider dans la liste ne correspond à mon thème	Sélectionnez la bibliothèque la plus proche de ce qu'utilise votre thème, puis ajustez manuellement les sélecteurs et le HTML d'encapsulation. Si le problème persiste, réglez Custom Image Slider sur aucun et fiez-vous aux sélecteurs CSS simples dans la section Compatibilité du thème.
La vignette vidéo apparaît complètement en dehors du slider	Le Selector for the slider's thumbnails container est incorrect ou vide. Ouvrez les outils de développement de votre navigateur, inspectez le conteneur du slider, copiez un sélecteur unique pour celui-ci et collez-le dans ce champ.
Le slider scintille ou se réanime à chaque chargement de page	Cela est causé par l'étape Refresh slider. C'est un comportement attendu. Si le scintillement est inacceptable, contactez le développeur de votre thème à propos d'un hook natif qui se déclenche lorsque le slider finit de s'initialiser, puis désactivez la bascule de rafraîchissement.

Foire aux questions

Comment savoir quelle bibliothèque de slider mon thème utilise ?

Ouvrez la page produit de votre boutique, faites un clic droit sur la galerie d'images et choisissez "Inspecter l'élément". Regardez les classes CSS sur le conteneur du slider — des noms de classes comme slick-initialized, swiper-container, owl-carousel ou flickity-enabled identifient la bibliothèque. Vous pouvez également consulter les fichiers JavaScript de votre thème pour y trouver le nom de la bibliothèque.

Dois-je configurer ceci si les vidéos s'affichent déjà correctement ?

Non. Si les vignettes vidéo apparaissent correctement dans votre slider sans aucune configuration ici, laissez tout sur les valeurs par défaut (aucun slider sélectionné). Les paramètres du slider ne sont nécessaires que lorsque les vignettes sont manquantes, masquées ou causent des dysfonctionnements du slider.

Quelle est la différence entre "Owl Carousel Old" et "Owl Carrousel" dans la liste déroulante ?

"Owl Carousel Old" cible Owl Carousel version 1 (antérieur à 2.0). "Owl Carrousel" cible Owl Carousel version 2 et ultérieure. La version 2 utilise une API différente pour la réinitialisation et nécessite l'activation de la bascule Refresh slider. Si vous sélectionnez la mauvaise version, le déclencheur de rafraîchissement ne fonctionnera pas et les nouveaux slides pourraient ne pas apparaître.

Puis-je utiliser l'intégration du slider avec les modes d'affichage panneau latéral ou onglet de contenu ?

Oui, mais l'intégration du slider n'affecte que le placement dans la galerie d'images. Si vous affichez également des vidéos dans le panneau latéral ou l'onglet de contenu, ces emplacements sont indépendants du slider et ne nécessitent pas de configuration slider.

Mon thème utilise Swiper 8 — quelle classe dois-je utiliser comme sélecteur de conteneur ?

Swiper 8 a changé la classe du conteneur principal de .swiper-container en .swiper. Utilisez .swiper comme sélecteur de conteneur de vignettes lorsque votre thème utilise Swiper 8 ou une version ultérieure.

L'activation de Sync affecte-t-elle la lecture de la vidéo ?

Sync contrôle uniquement la position du slider — il maintient la bande de vignettes et le slider d'image principale en phase lorsqu'une vignette est cliquée. Cela n'affecte pas la lecture vidéo ni le lecteur vidéo lui-même.

Fonctionnalités associées

• Compatibilité du thème — Sélecteurs CSS principaux et paramètres généraux d'intégration au thème
• Placement dans la galerie d'images — Paramètres d'affichage de la galerie qui fonctionnent conjointement avec la configuration du slider