https://github.com/saikatkarar/react_image_slider
This code creates an interactive and animated UI for switching between two images in a carousel-like slider.
https://github.com/saikatkarar/react_image_slider
react tailwindcss
Last synced: 3 months ago
JSON representation
This code creates an interactive and animated UI for switching between two images in a carousel-like slider.
- Host: GitHub
- URL: https://github.com/saikatkarar/react_image_slider
- Owner: SaikatKarar
- Created: 2024-04-30T16:41:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-14T15:01:44.000Z (6 months ago)
- Last Synced: 2025-01-28T17:18:29.776Z (5 months ago)
- Topics: react, tailwindcss
- Language: JavaScript
- Homepage: https://6631cbedab23be827a5c121c--stirring-pudding-a700b3.netlify.app/
- Size: 51.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
```markdown
# React image slider project:
This is a simple **React-based Image Slider** with smooth transitions and a toggle button for navigation. The project uses **React Hooks**, **Tailwind CSS**, and **React Icons** to create a visually appealing and responsive image slider.
## Features
1. **State Management**:
- Uses `useState` to manage the visibility of the current image.
2. **Smooth Transitions**:
- Implements sliding animations between images using `Tailwind CSS` utilities like `transition-transform` and `duration-300`.
3. **Navigation Button**:
- Includes a toggle button for switching between images, with intuitive icons (`MdOutlineArrowForwardIos`, `MdOutlineArrowBackIos`) from the `react-icons` library.
4. **Responsive Design**:
- Fully responsive layout using `Tailwind CSS` for styling.
## Tech Stack
- **React**: Frontend framework.
- **Tailwind CSS**: For styling and responsive design.
- **React Icons**: For interactive and user-friendly navigation.
## Installation and Usage
1. **Clone the Repository**:
```bash
git clone https://github.com/your-username/react-image-slider.git
cd react-image-slider
```
2. **Install Dependencies**:
```bash
npm install
```
3. **Run the Project**:
```bash
npm run dev
```
4. **View in Browser**:
Open [http://localhost:5173](http://localhost:5173) to view the app.
## Code Explanation
- The component renders two images inside a container.
- The `useState` hook manages the `val` state, determining which image is displayed.
- A toggle button, styled with Tailwind CSS, switches the state, triggering smooth sliding animations between the images.
## Demo
## Folder Structure
```
react-image-slider/
├── src/
│ ├── App.css # Tailwind CSS styling
│ ├── App.jsx # Main React component
│ ├── index.jsx # Entry point
│ └── assets/ # Image assets (optional)
├── public/
│ └── index.html # HTML template
├── package.json # Project metadata and dependencies
└── README.md # Project documentation
```
## Contributing
Contributions are welcome! Please fork the repository and create a pull request for any features or fixes.
---
Feel free to customize this `README.md` file as needed!
```