zero-js-slider

A high-performance, Zero-JS React slider with 0ms INP.

Installation

To install the package, use npm or yarn:

``bash
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
``

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any enhancements or bug fixes.

License

This project is licensed under the MIT License. See the LICENSE file for more details.