@simplefavor.xyz/simple-swiper

A simple and customizable Swiper component for React applications.

Installation

Install the package along with its peer dependencies:

npm install @simplefavor.xyz/simple-swiper swiper react-image-gallery

Usage

1. Import the necessary CSS files in your main application file (e.g., App.js or index.js):

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import "react-image-gallery/styles/css/image-gallery.css";

2. Use the SimpleSwiper component in your React application:

import React from "react";
import { SimpleSwiper } from "@simplefavor.xyz/simple-swiper";

const MyComponent = () => {
  const images = [
    { path: "https://example.com/image1.jpg", width: 1920, height: 1080 },
    { path: "https://example.com/image2.jpg", width: 1920, height: 1080 },
    { path: "https://example.com/image3.jpg", width: 1920, height: 1080 },
  ];

  return (
    <div style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}>
      <SimpleSwiper images={images} />
    </div>
  );
};

export default MyComponent;

Props

The SimpleSwiper component accepts the following props:

• images (required): An array of image objects, each containing:
  • path: URL or path to the image
  • width: Width of the image
  • height: Height of the image
• loop (optional): Boolean to enable/disable infinite loop. Default is true.
• enableImageGallery (optional): Boolean to enable/disable the full-screen image gallery feature. Default is false.

Advanced Usage

Enabling the Image Gallery

To enable the full-screen image gallery feature:

<SimpleSwiper images={images} enableImageGallery={true} />

Disabling the Loop

To disable the infinite loop:

<SimpleSwiper images={images} loop={false} />

Combining Options

You can combine multiple options:

<SimpleSwiper images={images} enableImageGallery={true} loop={false} />

Styling

The SimpleSwiper uses default styles from Swiper and react-image-gallery. You can override these styles in your CSS for customization:

/* Example: Changing the pagination bullet color */
.swiper-pagination-bullet-active {
  background-color: #ff0000 !important;
}

/* Example: Changing the navigation arrow color */
.swiper-button-next,
.swiper-button-prev {
  color: #00ff00 !important;
}

Troubleshooting

1. Ensure all peer dependencies (swiper, react-image-gallery) are installed.
2. Check that CSS files are imported correctly.
3. Verify that image paths are correct and accessible.
4. For any other issues, check the console for error messages.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.