Product slider

El carrusel muestra un carrusel de productos con desplazamiento suave basado en CSS scroll-snap. No requiere bibliotecas JS externas (Slick, Swiper) - utiliza los mecanismos nativos del navegador.

Activar el módulo

Ve a WooCommerce > Polski > Storefront Modules y activa la opción Product Slider.

Tecnología scroll-snap

El carrusel usa CSS scroll-snap-type: x mandatory en lugar de las bibliotecas de carrusel tradicionales. Ventajas:

• Cero JavaScript para el desplazamiento - desplazamiento nativo suave
• Sin dependencias - no es necesario cargar Slick, Swiper ni Owl Carousel
• Total capacidad de respuesta - adaptación automática al ancho de la pantalla
• Táctil y ratón - compatibilidad nativa con el gesto swipe en dispositivos táctiles
• Rendimiento - sin reflow/repaint durante el desplazamiento, 60 FPS

Configuración de snap:

/* The slider applies these values by default */
.polski-slider {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.polski-slider__item {
    scroll-snap-align: start;
}

Tipos de carrusel

Productos relacionados

El carrusel muestra productos relacionados con el producto que se está viendo actualmente. Los productos relacionados se seleccionan según categorías y etiquetas.

[polski_product_slider type="related" product_id="123"]

Productos en oferta

Muestra productos con un precio de oferta activo.

[polski_product_slider type="sale" limit="12"]

Productos destacados

Muestra productos marcados como destacados (estrella en el panel de WooCommerce).

[polski_product_slider type="featured" limit="8"]

Más vendidos

Productos ordenados por número total de ventas.

[polski_product_slider type="bestsellers" limit="10"]

Más recientes

Productos ordenados por fecha de incorporación.

[polski_product_slider type="latest" limit="10"]

De una categoría específica

Productos de una categoría específica.

[polski_product_slider type="category" category="electronics" limit="12"]

Productos seleccionados

Productos concretos indicados por ID.

[polski_product_slider type="ids" ids="12,34,56,78,90"]

Bloque de Gutenberg

El bloque Polski - Product Slider está disponible en el editor de Gutenberg. La vista previa del carrusel se ve directamente en el editor.

Opciones del bloque:

Opción	Descripción	Predeterminado
Type	Origen de productos (related/sale/featured/etc.)	latest
Limit	Número máximo de productos	8
Columns	Productos visibles (escritorio)	4
Columns tablet	Productos visibles en tableta	2
Columns mobile	Productos visibles en el teléfono	1
Arrows	Mostrar flechas de navegación	Sí
Dots	Mostrar puntos de paginación	No
Auto scroll	Desplazamiento automático	No
Gap	Espaciado entre productos	16px
Title	Título sobre el carrusel	(vacío)

Shortcode [polski_product_slider]

Parámetros

Parámetro	Tipo	Predeterminado	Descripción
type	string	latest	Tipo: related, sale, featured, bestsellers, latest, category, ids
limit	int	8	Número máximo de productos
columns	int	4	Columnas en escritorio
columns_tablet	int	2	Columnas en tableta
columns_mobile	int	1	Columnas en móvil
category	string	(vacío)	Slug de la categoría (para type=category)
ids	string	(vacío)	IDs de productos (para type=ids)
product_id	int	(actual)	ID del producto (para type=related)
arrows	string	yes	Mostrar flechas
dots	string	no	Mostrar puntos de paginación
autoplay	string	no	Desplazamiento automático
autoplay_speed	int	5000	Pausa entre diapositivas (ms)
gap	string	16px	Espaciado entre tarjetas de producto
title	string	(vacío)	Título sobre el carrusel
orderby	string	date	Ordenar por: date, price, rating, rand
order	string	DESC	Dirección: ASC o DESC

Ejemplos

Carrusel de productos en oferta con título:

[polski_product_slider type="sale" limit="12" columns="4" title="Current promotions" arrows="yes"]

Carrusel de productos de una categoría en la página de inicio:

[polski_product_slider type="category" category="new-arrivals" limit="8" columns="3" dots="yes"]

Carrusel de más vendidos con desplazamiento automático:

[polski_product_slider type="bestsellers" limit="10" autoplay="yes" autoplay_speed="4000"]

Desplazamiento automático

Cuando autoplay="yes", el carrusel desplaza los productos automáticamente en el intervalo indicado. El desplazamiento se detiene cuando el usuario pasa el cursor sobre el carrusel o lo toca en un dispositivo móvil. Tras salir del carrusel, el desplazamiento automático se reanuda.

// Change default autoplay time globally
add_filter('polski/product_slider/autoplay_speed', function (): int {
    return 3000; // 3 seconds
});

Integración con módulos

Las tarjetas de producto del carrusel contienen elementos de otros módulos:

• Badges - distintivos de oferta, novedad, más vendido
• Wishlist - icono de corazón
• Compare - botón de comparación
• Quick view - icono de ojo
• Precio Omnibus - precio más bajo de los últimos 30 días

Carga diferida de imágenes

Las imágenes de producto del carrusel se cargan de forma diferida - las imágenes fuera del área visible no se obtienen hasta que se desplaza. Se utilizan el atributo nativo loading="lazy" e Intersection Observer para navegadores antiguos.

Estilos CSS

• .polski-slider - contenedor del carrusel
• .polski-slider__track - pista de desplazamiento
• .polski-slider__item - tarjeta de producto
• .polski-slider__arrow - flecha de navegación
• .polski-slider__arrow--prev - flecha izquierda
• .polski-slider__arrow--next - flecha derecha
• .polski-slider__dots - contenedor de puntos de paginación
• .polski-slider__dot - punto individual
• .polski-slider__dot--active - punto activo
• .polski-slider__title - título

Solución de problemas

El carrusel no se desplaza con suavidad - asegúrate de que el navegador sea compatible con scroll-snap-type. Todos los navegadores modernos (Chrome 69+, Firefox 68+, Safari 11+) admiten esta propiedad.

Las flechas no funcionan - comprueba si hay un conflicto de CSS con otro carrusel de la página. Las clases .polski-slider__arrow pueden ser sobrescritas por los estilos del tema.

El autoplay no se detiene - asegúrate de que JavaScript no esté bloqueado por un plugin de optimización. El script del carrusel debe estar cargado.

Informar de problemas: github.com/wppoland/polski/issues

Esta página tiene únicamente fines informativos y no constituye asesoramiento legal. Consulta a un abogado antes de la implementación. Polski for WooCommerce es software de código abierto (GPLv2) proporcionado sin garantía.