VTEX Slider

Description

The VTEX Slider is a slider that aims a good support for SSR and can display one or more slides per page.

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

Table of Contents

• Usage
  • Configuration
    • Slider
    • Slide
    • SliderContainer
    • Dots
  • Styles API
    • CSS namespaces
• Tests

Usage

To import it you can add to you manifest.json the following:

{
  "dependencies": {
    "vtex.slider": "0.x"
  }
}

And then in your component you can import the components exported from the slider:

import { Slider, Slide } from 'vtex.slider'

You can use it in your code like a React component with the jsx tags:

handleChangeSlide = i => {
  this.setState({ currentSlide: i })
}

render() {
  const { currentSlide } = this.state
  // ...

  const { myProducts } = this.props

  return (
    <Slider currentSlide={currentSlide} onChangeSlide={this.handleChangeSlide}>
      {myProducts.map(product => (
        <Slide key={product.id}>
          <DisplayProductComponent product={product} />
        </Slide>
      ))}
    </Slider>
  )
}

If you want to show multiple items in the same page at the same time you can use the prop perPage:

render() {
  const { currentSlide } = this.state
  const { myProducts } = this.props

  // The keys of the object represent the size of the window in px.
  // In this case if the window is 1300px large or bigger it will show 5 items,
  // If it has 900px or any size until 1299px it will show 4 items
  const perPage = {
    1300: 5,
    900: 4,
    700: 2,
    600: 1,
  }

  return (
    <Slider
      currentSlide={currentSlide}
      onChangeSlide={this.handleChangeSlide}
      perPage={perPage}
    >
      {myProducts.map(product => (
        <Slide key={product.id}>
          <DisplayProductComponent product={product} />
        </Slide>
      ))}
    </Slider>
  )
}

Bellow is an example with all the components together:

arrowRender = ({ orientation, onClick }) => {
  return (
    <div className="arrow-container-class" onClick={onClick}>
      <MyArrowComponent orientation={orientation} />
    </div>
  )
}

arrowContainerRender = ({ children }) => {
  return (
    <MyContainerComponent>
      {children}
    </MyContainerComponent>
  )
}

render() {
  const { currentSlide } = this.state
  const { myProducts } = this.props

  const perPage = {
    1300: 5,
    1100: 4,
    900: 3,
    700: 2,
    300: 1
  }

  return (
    <SliderContainer className="mw9">
      <Slider
        loop
        easing="ease"
        duration={500}
        perPage={perPage}
        currentSlide={currentSlide}
        arrowRender={this.arrowRender}
        onChangeSlide={this.handleChangeSlide}
        arrowsContainerComponent={this.arrowContainerRender}
      >
        {myProducts.map(product => (
          <Slide
            className="slide-css-class"
            sliderTransitionDuration={500}
            key={product.id}
            defaultWidth={280}
          >
            <ProductComponent product={product} />
          </Slide>
        ))}
      </Slider>
      <Dots
        loop
        showDotsPerPage
        perPage={this.perPage}
        currentSlide={currentSlide}
        totalSlides={myProducts.length}
        onChangeSlide={this.handleChangeSlide}
        classes={{
          root: 'pv4',
          notActiveDot: 'bg-muted-3',
          dot: 'dot pointer br-100',
          activeDot: 'bg-emphasis'
        }}
      />
    </SliderContainer>
  )
}

Configuration

Slider

Prop name	Type	isRequired	defaultValue	Description
arrowRender	func	🚫	🚫	A render function that will receive as props an orientation prop and an onClick callback
arrowsContainerComponent	func/string	🚫	🚫	The component used to contain both arrows. Either a string to use a DOM element or a component
children	element/array	✔️	🚫	The slides to render
classes	object	🚫	No extra classes applied to any element	Classes to apply to the Slider elements
currentSlide	number	🚫	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	🚫	'-webkit-grab'	Css value of cursor when mouse is hovering the slider frame
cursorOnMouseDown	string	🚫	'-webkit-grabbing'	Css value of cursor when mouse is down
duration	number	🚫	250	Duration of transitions
easing	string	🚫	'ease-out'	Transition function
loop	bool	🚫	false	If the slides should be looping
onChangeSlide	func	✔️	🚫	Function to change the value of currentSlide. The function should expect a number as it's only parameter
perPage	number/object	🚫	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	🚫	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	🚫	250	Resize debounce timer in milliseconds
rootTag	string	🚫	'div'	Tag to be rendered in the root of the slider
sliderFrameTag	string	🚫	'ul'	Tag to be rendered in the slider frame element
threshold	number	🚫	50	Minimum of pixels to drag until the slider change the currentSlide

Slide

Prop name	Type	isRequired	defaultValue	Description
children	node	✔️	🚫	Node to render
className	string	🚫	🚫	Classes to pass to the root element of the Slide
defaultWidth	number	🚫	🚫	Default width of the slide (only applied in the first render)
tag	string	🚫	li	Tag to be rendered in the root element
fitImg	bool	🚫	true	If the slide component should try to fit the img (only works if children is an img element)
resizeDebounce	number	🚫	250	Time of debounce of resize event listener
sliderTransitionDuration	number	🚫	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	🚫	false	If the slider should be passing automatically
autoplayInterval	number	🚫	5000	Time in milliseconds of the interval to change the currentSlider
children	node	✔️	🚫	Children of the component to render
className	string	🚫	🚫	Classes to be applied to the root element
onNextSlide	func	🚫	🚫	Function to be called if autoplay={true}
pauseOnHover	bool	🚫	true	If the interval should not be executed when the mouse is hovering the component
tag	string	🚫	'div'	Tag to render the component

Dots

Prop name	Type	isRequired	defaultValue	Description
classes	object	🚫	No extra classes applied to any element	Classes to style the elements of the component
dotProps	object	🚫	🚫	Extra props to be applied to the dot element
dotSize	number/string	🚫	🚫	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	🚫	'li'	Tag to be rendered in the dot element
loop	bool	🚫	false	If the slides should be looping
onChangeSlide	func	✔️	🚫	Function to change the currentSlide
perPage	number/object	🚫	1	This prop works the same way the perPage of Slider and this component should receive the same value of Slider
resizeDebounce	number	🚫	250	Debounce time in milliseconds
rootTag	string	🚫	'ul'	Tag to be rendered as the root element of the component
totalSlides	number	✔️	🚫	Total value of sliders that will be rendered
minPerPage	number	🚫	1	This prop works the same way the minPerPage of Slider and this component should receive the same value of Slider
showDotsPerPage	bool	🚫	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

🚧 🚧 🚧

Tests

Travis CI