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

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

1
2
3
4
5
{
  "dependencies": {
    "vtex.slider": "0.x"
  }
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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 nameTypeisRequireddefaultValueDescription
arrowRenderfunc🚫🚫A render function that will receive as props an orientation prop and an onClick callback
arrowsContainerComponentfunc/string🚫🚫The component used to contain both arrows. Either a string to use a DOM element or a component
childrenelement/arrayβœ”οΈπŸš«The slides to render
classesobject🚫No extra classes applied to any elementClasses to apply to the Slider elements
currentSlidenumber🚫0Current 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}).
cursorstring🚫'-webkit-grab'Css value of cursor when mouse is hovering the slider frame
cursorOnMouseDownstring🚫'-webkit-grabbing'Css value of cursor when mouse is down
durationnumber🚫250Duration of transitions
easingstring🚫'ease-out'Transition function
loopbool🚫falseIf the slides should be looping
onChangeSlidefuncβœ”οΈπŸš«Function to change the value of currentSlide. The function should expect a number as it's only parameter
perPagenumber/object🚫1Amount 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
minPerPagenumber🚫1Minimum amount of slides to be on the screen, can be used to control how many itens will be displayed in the smallest screen size
resizeDebouncenumber🚫250Resize debounce timer in milliseconds
rootTagstring🚫'div'Tag to be rendered in the root of the slider
sliderFrameTagstring🚫'ul'Tag to be rendered in the slider frame element
thresholdnumber🚫50Minimum of pixels to drag until the slider change the currentSlide

Slide

Prop nameTypeisRequireddefaultValueDescription
childrennodeβœ”οΈπŸš«Node to render
classNamestring🚫🚫Classes to pass to the root element of the Slide
defaultWidthnumber🚫🚫Default width of the slide (only applied in the first render)
tagstring🚫liTag to be rendered in the root element
fitImgbool🚫trueIf the slide component should try to fit the img (only works if children is an img element)
resizeDebouncenumber🚫250Time of debounce of resize event listener
sliderTransitionDurationnumber🚫250Duration 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 nameTypeisRequireddefaultValueDescription
autoplaybool🚫falseIf the slider should be passing automatically
autoplayIntervalnumber🚫5000Time in milliseconds of the interval to change the currentSlider
childrennodeβœ”οΈπŸš«Children of the component to render
classNamestring🚫🚫Classes to be applied to the root element
onNextSlidefunc🚫🚫Function to be called if autoplay={true}
pauseOnHoverbool🚫trueIf the interval should not be executed when the mouse is hovering the component
tagstring🚫'div'Tag to render the component

Dots

Prop nameTypeisRequireddefaultValueDescription
classesobject🚫No extra classes applied to any elementClasses to style the elements of the component
dotPropsobject🚫🚫Extra props to be applied to the dot element
dotSizenumber/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')
dotTagstring🚫'li'Tag to be rendered in the dot element
loopbool🚫falseIf the slides should be looping
onChangeSlidefuncβœ”οΈπŸš«Function to change the currentSlide
perPagenumber/object🚫1This prop works the same way the perPage of Slider and this component should receive the same value of Slider
resizeDebouncenumber🚫250Debounce time in milliseconds
rootTagstring🚫'ul'Tag to be rendered as the root element of the component
totalSlidesnumberβœ”οΈπŸš«Total value of sliders that will be rendered
minPerPagenumber🚫1This prop works the same way the minPerPage of Slider and this component should receive the same value of Slider
showDotsPerPagebool🚫falseIf 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

Coverage Status

Travis CI

Build Status