Store Slider

Store Slider de CRUCE es un componente que permite renderizar una lista de productos en formato carrusel con la posiblidad de configurar animaciones, elementos, visiblidad, entre otros aspectos desde el Site Editor.

img2-breadcrumb

Configuración

Agregar la aplicación store-slider en las dependencias de tu archivo manifest.json. Ejemplo:
manifest.json
```
1
{
2
  "dependencies": {
3
    "cruce.store-slider": "4.x"
4
  }
5
}
```

Es requisito agregar el bloque dentro de un contexto de lista de VTEX. Ejemplo:

1
{
2
  "list-context.product-list": {
3
    "blocks": ["product-summary.shelf"],
4
    "children": ["store-slider"],
5
    "props": {
6
      "orderBy": "OrderByTopSaleDESC"
7
    }
8
  }
9
}

Ejemplo con todas las props:

1
{
2
  "store-slider": {
3
    "props": {
4
      "componentOptions": {
5
        "isActive": true
6
      },
7
      "sliderOptions": {
8
        "slidesWidth": "auto",
9
        "loop": true,
10
        "dragFree": true,
11
        "align": "start",
12
        "slidesToScroll": 4,
13
        "duration": 80
14
      },
15
      "autoplayOptions": {
16
        "active": true,
17
        "dealy": 4000,
18
        "stopOnMouseEnter": false
19
      },
20
      "paginationOptions": {
21
        "showDots": false,
22
        "showArrows": true
23
      }
24
    }
25
  }
26
}

Propiedes generales

Prop name	Type	Description	Default value
isActive	Boolean	Determina si el el componente se muestra en el sitio o no.	true

Prop name	Type	Description	Default value
loop	Boolean	Activa/Desactiva el deslizamiento infinito.	true
dragFree	Boolean	Activa/Desactiva el arrastre libre	true
align	startendcenter	Define la alineación de los elementos del carrusel horizontalmente	start
slidesToScroll	Number	Define la cantidad de elemento que se arrastran al mover el carrusel. No funciona cuando dragFree está activo	4
slidesWidth	String	Controla el ancho de los elementos del carrusel (Desktop).	auto
slidesWidthMobile	String	Controla el ancho de los elementos del carrusel (Mobile)	auto

Propiedades del Autoplay

Prop name	Type	Description	Default value
active	Boolean	Activa/desactiva el autoplay.	false
delay	Number	Controla el intervalo de tiempo en que el carrusel avanza de slides automáticamente (en milisegundos).	4000
stopOnMouseEnter	Boolean	Determina si el carrusel continua moviendose al hacerle hover con el mouse.	false

Propiedades de la paginación

Prop name	Type	Description	Default value
showDots	Boolean	Activa/desactiva los dots de navegación.	true
showArrows	Boolean	Activa/desactiva las flechas de navegación	true

Personalización

Para aplicar personalizaciones de CSS en este y otros bloques, sigue las instrucciones dadas en la receta sobre Uso de CSS Handles para la personalización de la tienda.

CSS Handles
`sliderWrapper`
`sliderViewport`
`sliderContainer`
`sliderSlide`
`sliderDots`
`sliderDot`
`sliderDot__selected`
`sliderButton`
`arrowBackIcon`
`sliderButton__prev`
`sliderButton__next`
`sliderDot`
`sliderDot`

CSS Variables
`--slider-slide-p-right`
`--slider-slide-w`
`--slider-slide-opacity`
`--slider-button-color`
`--slider-button-w`
`--slider-button-h`
`--slider-button-hover-bg`
`--slider-button-hover-color`
`--slider-button-bg`
`--slider-dot-w`
`--slider-dot-h`
`--slider-dot-bg`
`--slider-dot-selected-bg`