Integración con Slider

Conecta Product Video con el slider de imágenes JavaScript de tu tema para que las miniaturas de vídeo aparezcan correctamente dentro del slider y este siga funcionando tras añadirlas.

nota

Disponible desde v3.0.0

Descripción general

Muchos temas reemplazan la lista de imágenes de producto predeterminada con una librería de slider JavaScript — Slick, Swiper, Owl Carousel y otras. Cada una de estas librerías gestiona su propia estructura DOM interna y el recuento de diapositivas. Cuando Product Video inyecta una miniatura de vídeo en la página, un slider que desconoce la nueva diapositiva puede ocultarla, romper su navegación o lanzar un error de JavaScript.

La Integración con Slider resuelve esto indicando al módulo qué librería de slider usa tu tema. Una vez seleccionada, el módulo carga una capa de compatibilidad que inyecta las miniaturas de vídeo en el formato que el slider espera. También puedes proporcionar selectores jQuery para los elementos contenedores específicos, añadir HTML envolvente alrededor de cada diapositiva inyectada, sincronizar dos sliders que se muevan juntos y forzar al slider a actualizar su estado interno tras añadir las nuevas diapositivas.

Solo necesitas configurar esta sección si la galería de imágenes de producto de tu tema usa una de las librerías de slider compatibles. Si tu tema usa una lista de imágenes simple sin slider, deja Slider de imagen personalizado en ninguno y omite esta sección.

Configuración

1. Ve a Módulos > Gestor de módulos, busca Product Video y haz clic en Configurar.
2. Abre la pestaña Compatibilidad con el tema.
3. Desplázate hacia abajo hasta la sección Configuración del slider.

Campo	Valores	Por defecto	Descripción
Slider de imagen personalizado	Ninguno, Slick Slider, BX Slider, Owl Carousel Old (anterior a 2.0), Owl Carrousel, Swiper Slider, Flickity Carousel, Light Slider, Bootstrap 5 Carousel	Ninguno	La librería de slider que usa tu tema. Al seleccionar una librería se carga la capa de compatibilidad correcta para ese slider.
Selector del contenedor de miniaturas del slider	Cadena de selector jQuery	—	Apunta al elemento contenedor que el slider usa para las miniaturas. Déjalo en blanco si tu slider se detecta automáticamente. Consulta los valores predeterminados por librería más abajo.
Selector del slider de imagen principal	Cadena de selector jQuery	—	Apunta al elemento del slider de imagen principal (grande) si tu tema usa un slider separado para ello. Rellena este campo solo si existe un slider de imagen principal diferenciado.
HTML del slider de imagen principal (antes)	Cadena HTML sin procesar	—	HTML que el módulo inyecta inmediatamente antes de cada diapositiva de imagen. Úsalo cuando tu slider requiera un elemento envolvente alrededor de cada elemento de diapositiva.
HTML del slider de imagen principal (después)	Cadena HTML sin procesar	—	HTML que el módulo inyecta inmediatamente después de cada diapositiva de imagen. Combínalo con el campo antes para abrir y cerrar etiquetas envolventes.
Sincronizar sliders de miniaturas e imagen	Sí / No	No	Cuando está activado, seleccionar una miniatura también mueve el slider de imagen principal a la posición correspondiente. Actívalo solo si tu tema usa un par sincronizado de slider de miniaturas y de imagen principal.
Actualizar slider tras añadir los elementos	Sí / No	No	Fuerza a la librería de slider a reinicializarse tras inyectar las miniaturas de vídeo. Necesario para Slick Slider y Owl Carousel v2 cuando las nuevas diapositivas no aparecen.

Cuando Sincronizar sliders de miniaturas e imagen está activado, el módulo desactiva automáticamente la función de ajuste automático de tamaño, ya que los sliders sincronizados gestionan su propio dimensionado. Un mensaje de confirmación en el Back Office te lo recordará si aplica.

Cómo funciona

Cuando seleccionas una librería de slider, el módulo cambia al modo de inyección con conocimiento del slider. En lugar de añadir elementos de miniatura a una lista simple, apunta al selector que proporcionas e inserta diapositivas en un formato que el slider puede renderizar.

Los campos HTML antes y después te permiten envolver cada diapositiva inyectada en el marcado que requiera tu variante de slider — por ejemplo, Bootstrap 5 Carousel necesita <div class="carousel-item"> alrededor de cada diapositiva.

Si Actualizar slider está activado, el módulo lanza el evento de reinicialización apropiado tras la inyección. Para Slick, esto significa llamar a slickAdd o volver a lanzar la inicialización. Para Owl Carousel v2, despacha refresh.owl.carousel. Este paso es lo que hace que el slider recuente sus diapositivas y muestre puntos de navegación o flechas para el vídeo recién añadido.

Si Sincronizar está activado, el módulo también mueve el slider de imagen principal en paralelo cada vez que se selecciona una miniatura de vídeo desde la tira de miniaturas.

Valores predeterminados por librería

Slick Slider

• Selector del contenedor de miniaturas: Un selector que apunte al elemento con la clase slick-slider, por ejemplo .slick-slider o .product-images .slick-slider.
• Actualizar slider: Actívalo. Slick no detecta automáticamente las nuevas diapositivas — necesita una llamada de reinicialización tras la inyección.
• Sincronizar: Actívalo si tu tema ejecuta una configuración Slick sincronizada de imagen principal y miniaturas, y rellena ambos selectores.

BX Slider

• Selector del contenedor de miniaturas: El selector del elemento <ul> sobre el que se inicializa BX Slider.
• Actualizar slider: Normalmente no es necesario — BX Slider gestiona el contenido dinámico mejor que Slick.

Owl Carousel Old (anterior a 2.0)

• Selector del contenedor de miniaturas: Usa #thumbs_list_frame o el selector de contenedor Owl específico que defina tu tema.
• Actualizar slider: No es necesario para Owl v1.

Owl Carrousel (v2)

• Selector del contenedor de miniaturas: El selector del div contenedor de Owl v2.
• Actualizar slider: Actívalo. Owl v2 requiere un evento trigger('refresh.owl.carousel') tras añadir nuevos elementos.

Swiper Slider

• Selector del contenedor de miniaturas: El selector del elemento DOM con la clase .swiper-container (o .swiper en Swiper 8+).
• Selector de imagen principal: Rellénalo si existe una instancia Swiper separada para la imagen principal.
• Sincronizar: Actívalo si tu tema usa la sincronización de galería de miniaturas integrada de Swiper.

Flickity Carousel

• Selector del contenedor de miniaturas: El selector del elemento inicializado con Flickity.
• Actualizar slider: Generalmente no es necesario — Flickity gestiona los elementos añadidos sin necesidad de una reinicialización completa.

Light Slider

• Selector del contenedor de miniaturas: El selector del elemento contenedor de Light Slider.

Bootstrap 5 Carousel

• Selector del contenedor de miniaturas: El selector del contenedor .carousel.
• HTML del slider de imagen principal (antes): Introduce <div class="carousel-item"> — Bootstrap 5 requiere este envoltorio alrededor de cada diapositiva.
• HTML del slider de imagen principal (después): Introduce </div> para cerrar el envoltorio.

Ejemplos de uso

Ejemplo: tema con Slick Slider y tira de miniaturas

Tu tema usa Slick tanto para la imagen principal como para la tira de miniaturas inferior, sincronizados.

1. Establece Slider de imagen personalizado en Slick Slider.
2. En Selector del contenedor de miniaturas del slider, introduce .product-images .slick-slider (ajústalo al marcado de tu tema).
3. En Selector del slider de imagen principal, introduce .product-cover .slick-slider.
4. Activa Sincronizar sliders de miniaturas e imagen.
5. Activa Actualizar slider tras añadir los elementos.
6. Guarda. Las miniaturas de vídeo aparecerán ahora como diapositivas Slick tanto en la tira de miniaturas como en el área de imagen principal, sincronizadas.

Ejemplo: Swiper Slider sin sincronización

Tu tema usa un único Swiper para las miniaturas, sin slider de imagen principal separado.

1. Establece Slider de imagen personalizado en Swiper Slider.
2. En Selector del contenedor de miniaturas del slider, introduce .swiper-container o el selector más específico que use tu tema.
3. Deja Selector del slider de imagen principal en blanco.
4. Deja Sincronizar desactivado.
5. Guarda. El módulo añade las miniaturas de vídeo como diapositivas Swiper y el carrusel funciona con normalidad.

Ejemplo: Bootstrap 5 Carousel

Tu tema envuelve cada imagen de producto en un elemento de carrusel Bootstrap 5.

1. Establece Slider de imagen personalizado en Bootstrap 5 Carousel.
2. En HTML del slider de imagen principal (antes), introduce <div class="carousel-item">.
3. En HTML del slider de imagen principal (después), introduce </div>.
4. Establece Selector del contenedor de miniaturas del slider en .carousel.
5. Guarda. Cada miniatura de vídeo inyectada queda envuelta en un elemento de carrusel correcto y el carrusel Bootstrap la renderiza adecuadamente.

Notas importantes

• El desplegable Slider de imagen personalizado muestra únicamente las librerías compatibles. Si tu tema usa un slider personalizado o propietario que no aparece en la lista, elige la opción más parecida y ajusta manualmente los campos de selector y envoltorio HTML.
• Owl Carousel tiene dos entradas separadas: Owl Carousel Old (v1, anterior a 2.0) y Owl Carrousel (v2). Selecciona la versión que corresponda a tu tema. Usar la versión incorrecta hará que el activador de actualización no tenga ningún efecto.
• Esta sección solo es relevante cuando se usa la ubicación en la galería de imágenes. Si estás mostrando vídeos únicamente en el panel lateral, la pestaña de contenido o los listados de productos, la integración con slider no tiene ningún efecto.
• Cuando Sincronizar sliders de miniaturas e imagen está activado, el Ajuste automático de tamaño se desactiva automáticamente para el reproductor de vídeo. Esto es intencionado — los sliders sincronizados controlan el dimensionado por sí mismos y el ajuste automático interfiere.
• El botón de alternancia Actualizar slider añade un paso de reinicialización que puede causar un breve parpadeo visual cuando se carga la página de producto y el slider se vuelve a renderizar. Esto es normal.
• Los campos de selector aceptan cualquier selector jQuery válido. Prueba los selectores en la consola de desarrollador de tu navegador con $('tu-selector') para confirmar que apuntan al elemento correcto antes de guardar.

Solución de problemas

Problema	Solución
La miniatura de vídeo se inyecta pero no es visible en el slider	Activa Actualizar slider tras añadir los elementos. El recuento interno de diapositivas del slider está desactualizado y oculta la nueva diapositiva.
El slider se rompe completamente tras añadir la miniatura de vídeo	El marcado de diapositiva que el módulo inyectó no coincide con lo que espera el slider. Comprueba qué HTML envuelve cada diapositiva de imagen en tu tema, luego añade la etiqueta de apertura en HTML del slider de imagen principal (antes) y la etiqueta de cierre en HTML del slider de imagen principal (después).
La tira de miniaturas se desplaza pero la imagen principal no la sigue	Activa Sincronizar sliders de miniaturas e imagen y asegúrate de que tanto el selector de miniaturas como el selector de imagen principal están rellenos y apuntan a los elementos correctos.
Ninguna opción del slider de la lista coincide con mi tema	Selecciona la librería más parecida a la que usa tu tema y ajusta manualmente los selectores y el HTML envolvente. Si sigue sin funcionar, establece Slider de imagen personalizado en ninguno y confía en los selectores CSS simples de la sección Compatibilidad con el tema.
La miniatura de vídeo aparece completamente fuera del slider	El Selector del contenedor de miniaturas del slider es incorrecto o está vacío. Abre las herramientas de desarrollador de tu navegador, inspecciona el contenedor del slider, copia un selector único para él y pégalo en ese campo.
El slider parpadea o se reanima en cada carga de página	Esto está causado por el paso Actualizar slider. Es el comportamiento esperado. Si el parpadeo es inaceptable, contacta con el desarrollador de tu tema para que proporcione un hook nativo que se dispare cuando el slider termine de inicializarse, y luego desactiva el botón de actualización.

Preguntas frecuentes

¿Cómo sé qué librería de slider usa mi tema?

Abre la página de producto de tu tienda, haz clic derecho sobre la galería de imágenes y elige "Inspeccionar elemento". Fíjate en las clases CSS del contenedor del slider — nombres de clase como slick-initialized, swiper-container, owl-carousel o flickity-enabled identifican la librería. También puedes revisar los archivos JavaScript de tu tema para encontrar el nombre de la librería.

¿Necesito configurar esto si los vídeos ya se muestran correctamente?

No. Si las miniaturas de vídeo aparecen correctamente en tu slider sin ninguna configuración aquí, deja todo en los valores predeterminados (sin slider seleccionado). La configuración del slider solo es necesaria cuando las miniaturas faltan, están ocultas o hacen que el slider se rompa.

¿Cuál es la diferencia entre "Owl Carousel Old" y "Owl Carrousel" en el desplegable?

"Owl Carousel Old" apunta a Owl Carousel versión 1 (anterior a 2.0). "Owl Carrousel" apunta a Owl Carousel versión 2 y posteriores. La versión 2 usa una API diferente para la reinicialización y requiere que el botón Actualizar slider esté activado. Si seleccionas la versión incorrecta, el activador de actualización no funcionará y es posible que las nuevas diapositivas no aparezcan.

¿Puedo usar la integración con slider junto con los modos de visualización en panel lateral o pestaña de contenido?

Sí, pero la integración con slider solo afecta a la ubicación en la galería de imágenes. Si también muestras vídeos en el panel lateral o la pestaña de contenido, esas ubicaciones son independientes del slider y no requieren configuración de slider.

Mi tema usa Swiper 8 — ¿qué clase debo usar como selector de contenedor?

Swiper 8 cambió la clase del contenedor principal de .swiper-container a .swiper. Usa .swiper como selector del contenedor de miniaturas cuando tu tema use Swiper 8 o posterior.

¿Activar Sincronizar afecta a la reproducción del vídeo?

Sincronizar solo controla la posición del slider — mantiene la tira de miniaturas y el slider de imagen principal en paralelo cuando se hace clic en una miniatura. No afecta a la reproducción del vídeo ni al reproductor en sí.

Funcionalidades relacionadas

• Compatibilidad con el tema — Selectores CSS principales y configuración general de integración con el tema
• Ubicación en la galería de imágenes — Ajustes de visualización de la galería que funcionan conjuntamente con la configuración del slider