#Slider Setup

#Installation

yarn add @faceless-ui/slider

To create a slider, wrap any portion of your app with the <SliderProvider>. This component does not render anything in the DOM and is where the slider settings are defined. Inside of this, render a <SliderTrack>. This will add a scrollable element onto the page which overflows its content as necessary. Then, nest as many <Slide> components within the track as necessary.

import React from 'react';
import { SliderProvider, SliderTrack, Slide } from '@faceless-ui/slider';

export const MyComponent = () => {
  return (
    <SliderProvider slidesToShow={1}>
      <SliderTrack>
        <Slide index={0}>
          Slide 1
        </Slide>
        <Slide index={1}>
          Slide 2
        </Slide>
      </SliderTrack>
    </SliderProvider>
  )
}

Pro tip: These components do not need to be direct descendants of one another.

#Slider navigation

If your slider is not free-scrolling, drag-scrolling, or auto-playing, you will need to render navigation buttons. Conveniently, the <SliderButton> component solves the most common navigation needs and is highly customizable.

import React from 'react';
import { SliderProvider, SliderTrack, Slide, SliderButton } from '@faceless-ui/slider';

export const MyComponent = () => {
  return (
    <SliderProvider slidesToShow={1}>
      <SliderButton direction="prev">
        Previous
      </SliderButton>
      <SliderButton direction="next">
        Next
      </SliderButton>
      <SliderTrack>
        <Slide index={0}>
          Slide 1
        </Slide>
        <Slide index={1}>
          Slide 2
        </Slide>
      </SliderTrack>
    </SliderProvider>
  )
}

Alternatively, you could wire up your own button using methods on the slider context. To do this, access the goToNextSlide method with the useSlider hook.

import { SliderProvider, SliderTrack, Slide, useSlider } from '@faceless-ui/slider';

export const MyButton = () => {
  const { goToNextSlide } = useSlider();
  return (
    <button onClick={goToNextSlide}>
      Next
    </button>
  )
}

export const MyComponent = () => {
  return (
    <SliderProvider slidesToShow={1}>
      <MyButton />
      <SliderTrack>
        <Slide index={0}>
          Slide 1
        </Slide>
        <Slide index={1}>
          Slide 2
        </Slide>
      </SliderTrack>
    </SliderProvider>
  )
}

#Responsive sliders

It is very easy to make sliders responsive by overriding any of this settings at any CSS media query. For more information, see the breakpoints prop.

import React, { useState } from 'react';
import { SliderProvider, SliderTrack, Slide } from '@faceless-ui/slider';

export const MyComponent = () => {
  const [index, setIndex] = useState();

  return (
    <SliderProvider
      slidesToShow={2}
      breakpoints={{
        '@media (min-width: 768px)': {
          slidesToShow: 1,
        }
      }}
    >
      <SliderTrack>
        <Slide index={0}>
          Slide 1
        </Slide>
        <Slide index={1}>
          Slide 2
        </Slide>
      </SliderTrack>
    </SliderProvider>
  )
}

For a live example this, check out responsive slider.

#Synchronized sliders

It is also possible to synchronize multiple sliders, so the navigation of one slider triggers another. To do this, lift the index of one slider using the onSlide prop. This is a callback function that will fire on every slide change with the current slide index. Then, use this value to control another slider with its currentSlideIndex prop.

import React, { useState } from 'react';
import { SliderProvider, SliderTrack, Slide } from '@faceless-ui/slider';

export const MyComponent = () => {
  const [index, setIndex] = useState();

  return (
    <SliderProvider
      slidesToShow={1}
      onSlide={(incomingIndex) => {
        setIndex(incomingIndex);
      }}
    >
      <SliderTrack>
        <Slide index={0}>
          Slide 1
        </Slide>
        <Slide index={1}>
          Slide 2
        </Slide>
      </SliderTrack>
    </SliderProvider>
    <SliderProvider
      slidesToShow={1}
      currentSlideIndex={index}
    >
      <SliderTrack>
        <Slide index={0}>
          Description for slide 1
        </Slide>
        <Slide index={1}>
          Description for slide 2
        </Slide>
      </SliderTrack>
    </SliderProvider>
  )
}

For examples of synchronous sliders, check out lightbox slider or thumbnail slider.