https://github.com/sharjeel-siddiqui12/slider-using-react-tailwind

This project is a simple implementation of a slider component using React and Tailwind CSS. The slider allows users to navigate through a set of images or content by dragging or clicking on navigation buttons.
https://github.com/sharjeel-siddiqui12/slider-using-react-tailwind

react reactjs slider slider-component tailwind tailwind-css tailwindcss vite

Last synced: 12 days ago
JSON representation

This project is a simple implementation of a slider component using React and Tailwind CSS. The slider allows users to navigate through a set of images or content by dragging or clicking on navigation buttons.

• Host: GitHub
• URL: https://github.com/sharjeel-siddiqui12/slider-using-react-tailwind
• Owner: sharjeel-siddiqui12
• License: mit
• Created: 2024-08-22T20:56:04.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-27T20:50:35.000Z (5 months ago)
• Last Synced: 2024-11-09T15:23:30.872Z (2 months ago)
• Topics: react, reactjs, slider, slider-component, tailwind, tailwind-css, tailwindcss, vite
• Language: JavaScript
• Homepage: https://slider-reactjs-tailwind.vercel.app
• Size: 13.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Slider Using React and Tailwind CSS

## Description

This project is a simple implementation of a slider component using React and Tailwind CSS. The slider allows users to navigate through a set of images or content by dragging or clicking on navigation buttons.

## Features

- Responsive design

- Smooth sliding animation

- Customizable slide content

- Support for touch events

- Keyboard navigation

## Installation

1. Clone the repository: `git clone https://github.com/sharjeel-siddiqui12/slider-using-react-tailwind.git`

2. Navigate to the project directory: `cd slider-using-react-tailwind`

3. Install dependencies: `npm install`

## Usage

1. Import the Slider component into your React application:

```jsx

import Slider from './Slider';

function App() {

    return (

        


            

                {/* Add your slide content here */}

            

        

    );

}


export default App;

```

2. Customize the slide content by adding your own components or images inside the Slider component.

## Configuration

The Slider component accepts the following props:

- `slidesToShow` (number): The number of slides to show at a time. Default: 1.

- `autoplay` (boolean): Enable automatic slide transition. Default: false.

- `autoplayInterval` (number): The interval between slide transitions in milliseconds. Default: 3000.

- `infinite` (boolean): Enable infinite looping of slides. Default: true.

Example usage:

```jsx

    {/* Add your slide content here */}

```

## Contributing

Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.

## Screenshots





## License

This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.