A high-performance, Zero-JS React slider with 0ms INP.
npm install zero-js-sliderbash
npm install zero-js-slider
`
or
`bash
yarn add zero-js-slider
`
Usage
Import the Slider component in your React application:
`jsx
import { ZeroJSSlider } from 'zero-js-slider';
const App = () => {
return (
);
};
export default App;
`
ZeroJSSlider Props
| Prop | Type | Default | Description |
|--------------|--------------|------------|----------------------------------------------------------------------------------------------|
| children | ReactNode[]| Required | The slides to display. Each child represents a slide. |
| id | string | "zero-slider" | The base id for the slider and its slides. Useful for targeting specific sliders on a page. |
| aspectRatio| string | "16/9" | The aspect ratio of the slider container (e.g., "16/9", "4/5", "1/1"). |
| gap | string | "0px" | Space between slides (e.g., "10px", "1rem"). |
| showDots | boolean | true | Whether to show navigation dots below the slider. |
| showArrows | boolean | false | Whether to show "Start" and "End" navigation arrows. |
| className | string | "" | Custom class name(s) for the slider wrapper. |
| vertical | boolean | false | Set to true for vertical (TikTok-style) scrolling; false for horizontal scrolling. |
$3
`tsx
import { ZeroJSSlider } from 'zero-js-slider';
aspectRatio="4/3"
gap="1rem"
showDots={true}
showArrows={true}
className="my-slider"
vertical={false}
>
Slide 1
Slide 2
Slide 3
`
Features
- High performance with minimal JavaScript usage.
- Easy to integrate into any React application.
- Customizable styles.
Development
To run the development server, use:
`bash
npm run dev
`
To build the package for production, use:
`bash
npm run build
``