React Carousel Demo Project

This project demonstrates how to build a simple carousel in two different ways using React and Vite. It includes two implementations: one without any external libraries and the other using the react-slick library. The carousel allows you to cycle through a list of people with navigation buttons for manual control and also supports automatic sliding.

Table of Contents

• Getting Started
  • Prerequisites
  • Installation
• Usage
• Implementation Details
• Components and Structure
• Explore Data
• Additional Functionality
• Contact
• John Smilga React Course
• License
• Acknowledgments

Getting Started

Let the enchantment begin! Follow these instructions to set up and run the project on your local machine.

Prerequisites

Your journey into the world of React carousels requires:

• Node.js and npm to be installed on your machine.

Installation

1. Clone the repository to your local realm.

git clone https://github.com/Mohamed-Esmat/react-carousel-demo.git
cd react-carousel-demo

2. Perform the incantation to summon the project dependencies.

npm install

Usage

Experience the magic of the carousel with this simple command:

npm run dev

Behold! The application will manifest at http://localhost:3000.

Implementation Details

Gaze into the mystical depths of the project as it unravels the secrets of the carousel's construction:

• Exploit the powerful useState and useEffect hooks to tame and control state and side effects.
• Master the art of prop manipulation to pass ethereal data to child components.
• Experience two enchanting implementations: A minimalist carousel crafted with CSS transitions and the transform property, and an awe-inspiring carousel harnessed by the captivating react-slick library.

Components and Structure

Peer into the core components of this magical realm:

• src/App.jsx: The primary locus of the carousel's logic and state, where the magic comes to life.
• src/components/Carousel.jsx: Embrace the minimalist carousel, crafted without any external libraries.
• src/components/SlickCarousel.jsx: Be enchanted by the react-slick carousel, harnessing its mystical powers.

Additional Functionality

The enchantment continues with additional features:

• Marvel at the manual sliding capabilities, bestowed by the "prev" and "next" buttons.
• Embrace the marvel of automation with the auto slide functionality, seamlessly transitioning between slides at regular intervals.

Demo

Witness the enchanting carousel in action! Experience the live demo by following the link below:

Live Demo

Contact

If you wish to communicate with the creators of this enchanting carousel, we would be delighted to hear from you! Whether you have questions, feedback, or simply want to share your magical experiences with the project, feel free to reach out to us.

You can contact us through the following channels:

• Email: [email protected]
• Twitter: @MohamedEsmat045
• GitHub: Mohamed-Esmat

We eagerly await your messages, and our wizards will do their best to respond promptly and help you on your journey through this captivating world of React carousels. Remember, magic is all around us, and we are here to make your experience as enchanting as possible! 🧙‍♂️🌟

John Smilga React Course

This project is a part of the comprehensive React course created by the talented John Smilga on Udemy. Dive into the world of React with this enchanting course and uncover the secrets of building captivating projects like this carousel.

You can find the course on Udemy: React 18 Tutorial and Projects Course (2023)

License

The spells used to create this magical carousel are protected under the MIT License - see the LICENSE file for details.

Acknowledgments

This project would not have been possible without the guidance and influence of these wise beings:

• The creator of the mystical react-slick library, kenwheeler.
• Data and design inspiration from the mesmerizing Figma Slider.