1.0.9 • Published 1 year ago

product-slide v1.0.9

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Product Slide

A simple and customizable product slider component for React that allows users to change the product image by clicking on small images and zoom into the large image on hover.

HorizontalVertical

Installation

To install product-slide in your project, run the following command in your terminal:

npm install product-slide

Usage

1. Import the Component:

import ProductSlide from "product-slide";

2. Prepare Image Data:

Create an array of image URLs to display in the slider. You can use static image paths, import images, or fetch them dynamically from an API. Here's an example:

const API = {
  images: [
    "https://i.imgur.com/QkIa5tT.jpeg",
    "https://i.imgur.com/jb5Yu0h.jpeg",
    "https://i.imgur.com/UlxxXyG.jpeg",
  ],
};

3. Configure the Slider:

The ProductSlide component accepts a settings prop as an object to customize its behavior:

  • direction: (Optional, default: "horizontal") Sets the slider's orientation (horizontal or vertical).
  • zoom: (Optional, default: true) Enables or disables zoom functionality for individual slides.
const settings = {
  direction: "horizontal", // or "vertical"
  zoom: true,          // or false
};

4. Render the Slider:

Pass the image data (api) and configuration settings (settings) to the ProductSlide component:

function App() {
  return (
    <div style={{ width: "500px" }}>
      <ProductSlide settings={settings} api={API.images} />
    </div>
  );
}

Example

import ProductSlide from "product-slide";

const API = {
  images: [
    "https://i.imgur.com/QkIa5tT.jpeg",
    "https://i.imgur.com/jb5Yu0h.jpeg",
    "https://i.imgur.com/UlxxXyG.jpeg",
  ],
};

function App() {
  const settings = {
    direction: "horizontal", // or "vertical"
    zoom: true,          // or false
  };
  return (
    <div style={{ width: "500px" }}>
      <ProductSlide settings={settings} api={API.images} />
    </div>
  );
}

export default App;

License

MIT

We hope you find product-slide useful for creating visually appealing and interactive product sliders in your React applications!

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago