Skip to content

Latest commit

 

History

History
66 lines (50 loc) · 2.47 KB

Slider.md

File metadata and controls

66 lines (50 loc) · 2.47 KB

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:

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.

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 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