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
Sección titulada «Activar el módulo»Ve a Polski > Módulos y activa la opción Product Slider.
Tecnología scroll-snap
Sección titulada «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
Sección titulada «Tipos de carrusel»Productos relacionados
Sección titulada «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
Sección titulada «Productos en oferta»Muestra productos con un precio de oferta activo.
[polski_product_slider type="sale" limit="12"]Productos destacados
Sección titulada «Productos destacados»Muestra productos marcados como destacados (estrella en el panel de WooCommerce).
[polski_product_slider type="featured" limit="8"]Más vendidos
Sección titulada «Más vendidos»Productos ordenados por número total de ventas.
[polski_product_slider type="bestsellers" limit="10"]Más recientes
Sección titulada «Más recientes»Productos ordenados por fecha de incorporación.
[polski_product_slider type="latest" limit="10"]De una categoría específica
Sección titulada «De una categoría específica»Productos de una categoría específica.
[polski_product_slider type="category" category="electronics" limit="12"]Productos seleccionados
Sección titulada «Productos seleccionados»Productos concretos indicados por ID.
[polski_product_slider type="ids" ids="12,34,56,78,90"]Bloque de Gutenberg
Sección titulada «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]
Sección titulada «Shortcode [polski_product_slider]»Parámetros
Sección titulada «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
Sección titulada «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
Sección titulada «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 globallyadd_filter('polski/product_slider/autoplay_speed', function (): int { return 3000; // 3 seconds});Integración con módulos
Sección titulada «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
Sección titulada «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
Sección titulada «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
Sección titulada «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