#Slider
This package makes it incredibly easy to create sliders of every kind — free-scrolling, drag-scrolling, snapping, auto-playing, and so much more. Sliders are fully responsive and can even synchronize with other sliders. They are very easy to control using the built-in navigation components or provided methods. All sliders are fully accessible out-of-the-box.
Some common uses for this package include:
- Image sliders
- Content sliders
- Fullscreen sliders
- Lightbox sliders
- Thumbnail sliders
#How it works
The <SliderProvider> component wraps any section of your code with a new slider context. This component does not render anything in the DOM. This is where the slider settings are configured like slidesToShow and breakpoints.
Inside this is the <SliderTrack> component, which renders a scrollable element onto the page and overflows its content as necessary. Within the track are <Slide> components, each of which is a simple wrapper around the Intersection Observer API. These slides report their intersection statuses to the <SliderProvider> as they happen, using the track as their root. The last-most intersecting slide is considered active. With this pattern, we can freely navigate the track and trust the index is accurate.
By default, all sliders can be scrolled or dragged, although some sliders may want to render navigation controls. The <SliderButton> covers the most common navigation needs, but sliders are also easily controlled using methods provided by the useSlider hook. It is also possible to subscribe to slide events using the onSlide prop of the provider.