A React Slider / Carousel Component with Scroll Snapping and Intersection Observer. **_[Demo](https://lifarl.github.io/react-scroll-snap-slider/)_**
npm install @contentco/react-scroll-snap-sliderA React Slider / Carousel Component with Scroll Snapping and Intersection Observer. _Demo_
!npm bundle size

!NPM
!demo
```
yarn add @lifarl/react-scroll-snap-slider
> Note: This is a react component which uses styled components as peer dependency. yarn add styled-components if you don't have it.
`tsx`
import { Slider } from '@lifarl/react-scroll-snap-slider'
;
Foo
Bar
Baz
See also examples in App.tsx
Firing tracking events on css based sliders can be done with the intersection observer. Pass onSlideVisible to the Carousel and it will fire when a slide enters the viewport without triggering a rerender.
`typescript``
onSlideVisible?: (index: number) => void // Callback that is triggered when a slide gets visible by a threshold of 0.5
renderCustomArrow?: ({
direction,
ref,
onClick,
}: CustomArrowProps) => JSX.Element // In case you want to use your own arrow design and logic
slidesPerPageSettings?: SlidesPerPageSettings // optionally for setting fixed amounts of slides for different viewports (min-width: 512px / 753px / 1232px)
slideWidth?: number // optionally for setting a fixed slide width
onScrollStart?: () => void // callback that triggers at the beginning of the scroll event
onScrollEnd?: (index: number) => void // callback that triggers at the end of the scroll event
children: React.ReactNode // put your slides here :)
onSlidesVisibilityChange: (index: number) => void // callback when a slides visibility changes
ref: React.Ref // exposes three imperative handles: scrollToSlide, sliderRef, manualScroll
disableArrow: boolean // Disable arrows entirely
This lib does not include scroll snap polyfills to support older browsers like ie11. You would need to add them yourself. For more information see here.