Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Deprecated
Slider

{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":927,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-slider-0.png"}}

Warning

The Slider component has been deprecated in favor of the Slider Layout app. Although support for this component is still given, it's strongly recommended that you update your store theme with the Slider Layout's blocks in order to keep up with the component's evolution.

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.

Usage

You should follow the usage instruction in the main README.

To import it into your code:


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

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


_10
<Slider
_10
ssrFallback={this.ssrFallback()}
_10
sliderSettings={sliderSettings}
_10
scrollByPage={isScrollByPage}
_10
defaultItemWidth={DEFAULT_SHELF_ITEM_WIDTH + gap}
_10
>
_10
{...}
_10
</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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page