Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhijeetkokat007/ab-slide-ease
A seamless and easy-to-use React slider library for smooth, flexible web interfaces.
https://github.com/abhijeetkokat007/ab-slide-ease
babel react webpack
Last synced: 26 days ago
JSON representation
A seamless and easy-to-use React slider library for smooth, flexible web interfaces.
- Host: GitHub
- URL: https://github.com/abhijeetkokat007/ab-slide-ease
- Owner: Abhijeetkokat007
- License: apache-2.0
- Created: 2024-06-22T11:13:14.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-27T13:39:29.000Z (4 months ago)
- Last Synced: 2024-09-29T02:40:19.099Z (about 1 month ago)
- Topics: babel, react, webpack
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/ab-slide-ease
- Size: 649 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ab Slide Ease
Ab Slide Ease is a seamless and easy-to-use React slider library designed for smooth and flexible web interfaces. It allows you to create a responsive image slider with minimal configuration.
## Features
- Smooth slide transitions from right to left
- Automatic slide transitions with customizable intervals
- Navigation buttons for manual slide control
- Dots for slide navigation
- Fully responsive design
## Installation
Install the library using npm:
```bash
npm install ab-slide-ease
```
## Usage
To use Ab Slide Ease in your React project, follow the steps below:
**1. Import the Component and CSS**
First, import the AbSlideElse component and the accompanying CSS file.
```bash
import showSlider from 'ab-slide-ease';
```
**2. Provide Slide Data**
Prepare an array of slide data, each containing an image URL and a caption.
```bash
const images = [
'path/to/image1.jpg',
'path/to/image2.jpg',
'path/to/image3.jpg',
];
```
**3. Use the Component in Your JSX**
Use the AbSlideElse component in your JSX and pass the slide data and optional interval prop.
```bash
const App = () => {
return (
showSlider(images, 2000)}>Show Slider
);
};
export default App;
```
**Example**
Here's a complete example:
```bash
import React from 'react';
import showSlider from 'ab-slide-ease';
const images = [
'path/to/image1.jpg',
'path/to/image2.jpg',
'path/to/image3.jpg',
];
const App = () => {
return (
showSlider(images, 2000)}>Show Slider
);
};
export default App;
```
## License
This project is licensed under the Apache-2.0 License. See the [LICENSE](https://github.com/Abhijeetkokat007/ab-slide-ease/blob/main/LICENSE) file for details.
## Contributing
Contributions are welcome! Please open an issue or submit a pull request on GitHub [AB Slide Ease](https://github.com/Abhijeetkokat007/ab-slide-ease).