Slider

Description

Slider is a VTEX component that allows to show a collection of children components through a slide. To accomplish that, an external library called react-slick is used. This component can be imported and used by any VTEX app.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Table of Contents

Usage

You should follow the usage instruction in the main README.

To import it into your code:

1
import { Slider } from 'vtex.store-components'

You can use it in your code like a React component with the jsx tag: <Slider>.

1
2
3
4
5
6
7
8
<Slider
  ssrFallback={this.ssrFallback()}
  sliderSettings={sliderSettings}
  scrollByPage={isScrollByPage}
  defaultItemWidth={DEFAULT_SHELF_ITEM_WIDTH + gap}
>
  {...}
</Slider>

Configuration

Through the Storefront, you can change the Slider's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop nameTypeDescription
sliderSettingsSettingsThe slider settings
adaptToScreenBooleanMakes the items per page to adapt by the slider width
defaultItemWidthNumberDefault item width, it's necessary when the adaptToScreen is true
scrollByPageBooleanIf the scroll of items is by page or not
leftArrowClassesStringLeft arrow custom classes
rightArrowClassesStringRight arrow custom classes
dotsClassesStringDots custom classes
childrenNode!Array of items to be rendered inside the slider

Settings:

For more information on the slider settings, access the official documentation og the react-slick library.

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the Slider.

Class nameDescriptionComponent Source
arrowRightThe right arrow of the sliderindex
arrowLeftThe left arrow of the sliderindex
dotsThe slider dotsindex