SlideFusion 🎡

Welcome to SlideFusion, a modern and responsive image carousel built with React hooks. This component-based carousel is designed for smooth transitions, offering both auto and manual controls. It features optimized DOM manipulation for seamless infinite sliding effects.

Table of Contents

• Features
• Installation
• Usage
• API
• Contributing
• License
• Contact

Features

• Responsive Design: Adapts to any screen size, ensuring a great user experience on mobile and desktop.
• Smooth Transitions: Enjoy fluid animations as images slide from one to another.
• Auto-Slide: Automatically transitions through images after a set interval.
• Manual Controls: Navigate through images with easy-to-use next and previous buttons.
• Infinite Loop: Loop through images without interruption, creating a seamless experience.
• Progress Timer: Visual feedback showing how long until the next slide.
• Text Overlay: Add titles or descriptions to your images for more context.
• Optimized Performance: Efficient DOM manipulation ensures smooth interactions.

Installation

To get started with SlideFusion, you can download the latest release from the Releases section. Simply follow the instructions provided in the release notes to set up the carousel in your project.

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Step-by-Step Installation

1. Clone the Repository:

   git clone https://github.com/endereoone/slidefusion.git
   cd slidefusion

2. Install Dependencies:

   npm install
   # or
   yarn install

3. Run the Project:

   npm start
   # or
   yarn start

Your SlideFusion carousel should now be up and running on your local server.

Usage

Integrating SlideFusion into your project is straightforward. Here’s how you can use it:

1. Import the Carousel:

   import SlideFusion from 'slidefusion';

2. Add the Component:

   const App = () => {
       return (
           <div>
               <SlideFusion 
                   images={[
                       { src: 'image1.jpg', title: 'First Image' },
                       { src: 'image2.jpg', title: 'Second Image' },
                       { src: 'image3.jpg', title: 'Third Image' }
                   ]}
                   autoSlide={true}
                   slideInterval={3000}
               />
           </div>
       );
   };

3. Customize Props: You can customize various props such as autoSlide, slideInterval, and more to fit your needs.

API

Here’s a breakdown of the props you can use with the SlideFusion component:

Prop Name	Type	Default	Description
images	Array	[]	An array of image objects to display.
autoSlide	Boolean	true	Enables automatic sliding of images.
slideInterval	Number	3000	Time in milliseconds between auto slides.
showControls	Boolean	true	Shows next and previous buttons.
showTimer	Boolean	true	Displays a progress timer below the images.
textOverlay	Boolean	false	Enables text overlay on images.

Contributing

We welcome contributions to SlideFusion! If you have suggestions or improvements, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or fix.
3. Make your changes.
4. Submit a pull request with a clear description of your changes.

License

SlideFusion is licensed under the MIT License. See the LICENSE file for details.

Contact

For any questions or feedback, feel free to reach out:

• GitHub: endereoone
• Email: [email protected]

Thank you for using SlideFusion! We hope you enjoy building with it. Don’t forget to check the Releases section for updates and new features.