Description
The VTEX Slider is a slider that aims a good support for SSR and can display one or more slides per page.
:loudspeaker: Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request
Table of Contents
Usage
To import it you can add to you manifest.json
the following:
_10{_10 "dependencies": {_10 "vtex.slider": "0.x"_10 }_10}
And then in your component you can import the components exported from the slider:
_10import { Slider, Slide } from 'vtex.slider'
You can use it in your code like a React component with the jsx tags:
_21_21handleChangeSlide = i => {_21 this.setState({ currentSlide: i })_21}_21_21render() {_21 const { currentSlide } = this.state_21 // ..._21_21 const { myProducts } = this.props_21_21 return (_21 <Slider currentSlide={currentSlide} onChangeSlide={this.handleChangeSlide}>_21 {myProducts.map(product => (_21 <Slide key={product.id}>_21 <DisplayProductComponent product={product} />_21 </Slide>_21 ))}_21 </Slider>_21 )_21}
If you want to show multiple items in the same page at the same time you can use the prop perPage
:
_28render() {_28 const { currentSlide } = this.state_28 const { myProducts } = this.props_28_28 // The keys of the object represent the size of the window in px._28 // In this case if the window is 1300px large or bigger it will show 5 items,_28 // If it has 900px or any size until 1299px it will show 4 items_28 const perPage = {_28 1300: 5,_28 900: 4,_28 700: 2,_28 600: 1,_28 }_28_28 return (_28 <Slider_28 currentSlide={currentSlide}_28 onChangeSlide={this.handleChangeSlide}_28 perPage={perPage}_28 >_28 {myProducts.map(product => (_28 <Slide key={product.id}>_28 <DisplayProductComponent product={product} />_28 </Slide>_28 ))}_28 </Slider>_28 )_28}
Bellow is an example with all the components together:
_68arrowRender = ({ orientation, onClick }) => {_68 return (_68 <div className="arrow-container-class" onClick={onClick}>_68 <MyArrowComponent orientation={orientation} />_68 </div>_68 )_68}_68_68arrowContainerRender = ({ children }) => {_68 return (_68 <MyContainerComponent>_68 {children}_68 </MyContainerComponent>_68 )_68}_68_68render() {_68 const { currentSlide } = this.state_68 const { myProducts } = this.props_68_68 const perPage = {_68 1300: 5,_68 1100: 4,_68 900: 3,_68 700: 2,_68 300: 1_68 }_68_68 return (_68 <SliderContainer className="mw9">_68 <Slider_68 loop_68 easing="ease"_68 duration={500}_68 perPage={perPage}_68 currentSlide={currentSlide}_68 arrowRender={this.arrowRender}_68 onChangeSlide={this.handleChangeSlide}_68 arrowsContainerComponent={this.arrowContainerRender}_68 >_68 {myProducts.map(product => (_68 <Slide_68 className="slide-css-class"_68 sliderTransitionDuration={500}_68 key={product.id}_68 defaultWidth={280}_68 >_68 <ProductComponent product={product} />_68 </Slide>_68 ))}_68 </Slider>_68 <Dots_68 loop_68 showDotsPerPage_68 perPage={this.perPage}_68 currentSlide={currentSlide}_68 totalSlides={myProducts.length}_68 onChangeSlide={this.handleChangeSlide}_68 classes={{_68 root: 'pv4',_68 notActiveDot: 'bg-muted-3',_68 dot: 'dot pointer br-100',_68 activeDot: 'bg-emphasis'_68 }}_68 />_68 </SliderContainer>_68 )_68}
Configuration
Slider
Prop name | Type | isRequired | defaultValue | Description |
---|---|---|---|---|
arrowRender | func | :no_entry_sign: | :no_entry_sign: | A render function that will receive as props an orientation prop and an onClick callback |
arrowsContainerComponent | func/string | :no_entry_sign: | :no_entry_sign: | The component used to contain both arrows. Either a string to use a DOM element or a component |
children | element/array | :heavy_check_mark: | :no_entry_sign: | The slides to render |
classes | object | :no_entry_sign: | No extra classes applied to any element | Classes to apply to the Slider elements |
currentSlide | number | :no_entry_sign: | 0 | Current slide on the screen, if you have perPage > 1, then the current slide is the most left slide on the screen (You should not use this variable to display the index of the slide on the screen if you're using loop={true} ). |
cursor | string | :no_entry_sign: | '-webkit-grab' | Css value of cursor when mouse is hovering the slider frame |
cursorOnMouseDown | string | :no_entry_sign: | '-webkit-grabbing' | Css value of cursor when mouse is down |
duration | number | :no_entry_sign: | 250 | Duration of transitions |
easing | string | :no_entry_sign: | 'ease-out' | Transition function |
loop | bool | :no_entry_sign: | false | If the slides should be looping |
onChangeSlide | func | :heavy_check_mark: | :no_entry_sign: | Function to change the value of currentSlide. The function should expect a number as it's only parameter |
perPage | number/object | :no_entry_sign: | 1 | Amount of slides to be on the screen, if a number is passed, then that's the number of slides that will be shown, if an object with breakpoints is passed, then the component will check the size of the screen to see how many slides will be on the screen at the same time |
minPerPage | number | :no_entry_sign: | 1 | Minimum amount of slides to be on the screen, can be used to control how many itens will be displayed in the smallest screen size |
resizeDebounce | number | :no_entry_sign: | 250 | Resize debounce timer in milliseconds |
rootTag | string | :no_entry_sign: | 'div' | Tag to be rendered in the root of the slider |
sliderFrameTag | string | :no_entry_sign: | 'ul' | Tag to be rendered in the slider frame element |
threshold | number | :no_entry_sign: | 50 | Minimum of pixels to drag until the slider change the currentSlide |
navigationStep | number | 'page' | :no_entry_sign: | 'page' | How many elements should pass when you click in the arrows to navigate |
Slide
Prop name | Type | isRequired | defaultValue | Description |
---|---|---|---|---|
children | node | :heavy_check_mark: | :no_entry_sign: | Node to render |
className | string | :no_entry_sign: | :no_entry_sign: | Classes to pass to the root element of the Slide |
defaultWidth | number | :no_entry_sign: | :no_entry_sign: | Default width of the slide (only applied in the first render) |
tag | string | :no_entry_sign: | li | Tag to be rendered in the root element |
fitImg | bool | :no_entry_sign: | true | If the slide component should try to fit the img (only works if children is an img element) |
resizeDebounce | number | :no_entry_sign: | 250 | Time of debounce of resize event listener |
sliderTransitionDuration | number | :no_entry_sign: | 250 | Duration of transition passed to Slider (must be the same), if nothing is passed to any of the components it will apply the same default value |
SliderContainer
Prop name | Type | isRequired | defaultValue | Description |
---|---|---|---|---|
autoplay | bool | :no_entry_sign: | false | If the slider should be passing automatically |
autoplayInterval | number | :no_entry_sign: | 5000 | Time in milliseconds of the interval to change the currentSlider |
children | node | :heavy_check_mark: | :no_entry_sign: | Children of the component to render |
className | string | :no_entry_sign: | :no_entry_sign: | Classes to be applied to the root element |
onNextSlide | func | :no_entry_sign: | :no_entry_sign: | Function to be called if autoplay={true} |
pauseOnHover | bool | :no_entry_sign: | true | If the interval should not be executed when the mouse is hovering the component |
tag | string | :no_entry_sign: | 'div' | Tag to render the component |
Dots
Prop name | Type | isRequired | defaultValue | Description |
---|---|---|---|---|
classes | object | :no_entry_sign: | No extra classes applied to any element | Classes to style the elements of the component |
dotProps | object | :no_entry_sign: | :no_entry_sign: | Extra props to be applied to the dot element |
dotSize | number/string | :no_entry_sign: | :no_entry_sign: | The size of the dots, can be a number (in this case it will use px unit), or a string (you have to pass the number with the unit e.g '3rem' ) |
dotTag | string | :no_entry_sign: | 'li' | Tag to be rendered in the dot element |
loop | bool | :no_entry_sign: | false | If the slides should be looping |
onChangeSlide | func | :heavy_check_mark: | :no_entry_sign: | Function to change the currentSlide |
perPage | number/object | :no_entry_sign: | 1 | This prop works the same way the perPage of Slider and this component should receive the same value of Slider |
resizeDebounce | number | :no_entry_sign: | 250 | Debounce time in milliseconds |
rootTag | string | :no_entry_sign: | 'ul' | Tag to be rendered as the root element of the component |
totalSlides | number | :heavy_check_mark: | :no_entry_sign: | Total value of sliders that will be rendered |
minPerPage | number | :no_entry_sign: | 1 | This prop works the same way the minPerPage of Slider and this component should receive the same value of Slider |
showDotsPerPage | bool | :no_entry_sign: | false | If this frag is true, then every dot represent a page of slides (e.g. if perPage = 2 and you have 4 elements, then you have 2 dots), if false, then it will render one dot to each slide |
Styles API
You can style this app by using the props classeName
and classes
of the components. But if you want to style every slider of your app you need to use the CSS namespaces to do it.
CSS namespaces
:construction: :construction: :construction: