zero-js-slider

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

Installation

To install the package, use npm or yarn:

npm install zero-js-slider

or

yarn add zero-js-slider

Usage

Import the Slider component in your React application:

import { ZeroJSSlider } from 'zero-js-slider';

const App = () => {
  return (
    <div>
      <ZeroJSSlider>
        <img src="img1.jpg" alt="Product 1" />
        <img src="img2.jpg" alt="Product 2" />
        <img src="img3.jpg" alt="Product 3" />
      </ZeroJSSlider>
    </div>
  );
};

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. |

Example

import { ZeroJSSlider } from 'zero-js-slider';

<ZeroJSSlider
  aspectRatio="4/3"
  gap="1rem"
  showDots={true}
  showArrows={true}
  className="my-slider"
  vertical={false}
>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</ZeroJSSlider>

Features

• High performance with minimal JavaScript usage.
• Easy to integrate into any React application.
• Customizable styles.

Development

To run the development server, use:

npm run dev

To build the package for production, use:

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.