Components & hooks
Build any slider you can imagine with our collection of components and don't spend hours reinventing the wheel. Styling, responsiveness, accessibility... all has been taken care of so you can focus on what's important: the content of the slider.
Components
- <BlurredBackground />Blurred background component based on the current slide. By default, it takes all the available space of its container.
- <NavigationArrowButtons />Navigation arrow buttons. They are rendered together.
- <NavigationArrows />Navigation arrows component. They are rendered on the most left and right of the slider.
- <NavigationButtons />Navigation buttons component based on the title of each slide. It displays buttons to navigate to each slide.
- <NavigationControls />Navigation controls component. It displays a dot for each slide to allow navigation. In slides with automatic scroll, the active dot gets filled as the time progresses.
- <NavigationDots />Navigation dots component. It displays a dot for each slide to allow navigation.
- <Slider />The Slider component is the main component that wraps all the other components. It also allows customizing the slider with specific props.
- <SliderImage />Simple image component to display the current active slide.
Hooks
- useAutomaticScroll()Hook to automatically scroll the slider. It can be used in the Slider component.
- useNativeScroll()Hook to allow native scroll in the slider.
- useSliderData()Hook to get several variables from the slider context, including the current slide, setting the current slide and all the slides. It can be used by any component inside the Slider.