️ Warning

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.

You should follow the usage instruction in the main README.

To import it into your code:

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

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

<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 name	Type	Description
sliderSettings	Settings	The slider settings
adaptToScreen	Boolean	Makes the items per page to adapt by the slider width
defaultItemWidth	Number	Default item width, it's necessary when the adaptToScreen is true
scrollByPage	Boolean	If the scroll of items is by page or not
leftArrowClasses	String	Left arrow custom classes
rightArrowClasses	String	Right arrow custom classes
dotsClasses	String	Dots custom classes
children	Node!	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.

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 name	Description	Component Source
arrowRight	The right arrow of the slider	index
arrowLeft	The left arrow of the slider	index
dots	The slider dots	index