https://github.com/fitri-hy/hy-image-slider-react
Simple project module (Image Slider) for ReactJS
https://github.com/fitri-hy/hy-image-slider-react
image-slider react-image react-image-slider react-slider
Last synced: 2 months ago
JSON representation
Simple project module (Image Slider) for ReactJS
- Host: GitHub
- URL: https://github.com/fitri-hy/hy-image-slider-react
- Owner: fitri-hy
- Created: 2024-03-07T06:58:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-08T09:48:08.000Z (about 1 year ago)
- Last Synced: 2025-02-22T13:03:22.112Z (3 months ago)
- Topics: image-slider, react-image, react-image-slider, react-slider
- Language: JavaScript
- Homepage:
- Size: 418 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modules Images Slider for React v.1.0.0
ReactJS modules are simple but have many advantages, one of which is that you can customize them freely.
## NPM Installation
```sh
npm install hy-image-slider-react
```
## Example Project Implemented
```sh
// Add - Impport module //
import Slider from 'hy-image-slider-react';
//----//
const App = () => {
return (
// Add - Default components //
//----//
);
};
export default App;
```
## Customization
| Atribute | Key | Description | Status |
|:--------------------------|:-----------|:-----------|:-----------|
| `images={key?}` |`['banner-1.jpg', 'banner-1.jpg', 'banner-1.jpg']` |Insert image (local/url) |Required
| `interval={key?}` |`500` `1000` `3000` etc... |Set interval time |Required
| `width={key?}` |`600` `1000` `1500` etc... |Set width (px) |Optional
| `height={key?}` |`600` `1000` `1500` etc... |Set height (px) |Optional
| `objectFit="key?"` |`fill` `contain` `cover` `scale-down` `none` |Set Image Object |Optional
| `hoverStop={key?}` |`true` `false` |Image stops on hover |Optional
| `borderRadius={key?}` |`0` `10` `25` etc... |Set corner radius image |Optional
| `hideButton={key?}` |`true` `false` |Hide/Show button |Optional
| `buttonTextNext="key?"` |Any text |Set text button (Next) |Optional
| `buttonTextPrev="key?"` |Any text |Set text button (Prev) |Optional
| `classSlider="key?"` |Use class css |CSS Slider Container |Optional
| `classImg="key?"` |Use class css |CSS Slider images |Optional
| `classButtonMain="key?"` |Use class css |CSS Slider Button Container |Optional
| `classButton="key?"` |Use class css |CSS Slider Button |Optional
## Full Customization
```sh
```
## Structural Components
```sh
```
Happy Coding :)
Follow Me: FOLLOW