https://github.com/sinamalizadeh/react-carousel
Reactjs simple slider
https://github.com/sinamalizadeh/react-carousel
react-carousel reactjs reactjs-slider responsive-sli
Last synced: 29 days ago
JSON representation
Reactjs simple slider
- Host: GitHub
- URL: https://github.com/sinamalizadeh/react-carousel
- Owner: SinaMAlizadeh
- Created: 2023-05-08T11:55:41.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-26T12:42:35.000Z (almost 3 years ago)
- Last Synced: 2025-05-02T13:49:13.860Z (about 1 year ago)
- Topics: react-carousel, reactjs, reactjs-slider, responsive-sli
- Language: TypeScript
- Homepage:
- Size: 879 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Simple Image Slider
A simple and reusable image slider for React ([Demo](https://codesandbox.io/s/react-js-images-simple-slider-qlyfsy "Demo"))
## Installation
The package can be installed via NPM:
```
npm i reactjs-simple-slider
```
## Usage
Import Slider for usage :
```js
import { Slider } from "reactjs-simple-slider";
```
Define your slider and config :
```js
```
## User guide
| Prop name | Description | Default value | Example values |
| ------------ | ---------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------ |
| width | Width of slider | | 200px |
| height | Height of slider | | 500px |
| objectFit | The objectFit property is used to specify how an images should be resized to fit its container | undefined | fill , contain , cover , none , scale-down , undefined |
| images | List of images to show | string[] | {["image1", "image2", "image3"]} |
| leftArrow | You can customize arrow left by pass string or a react component or function | | React Component or string |
| rightArrow | You can customize arrow right by pass string or a react component or function | | React Component or string |
| infiniteLoop | Set auto change slide | false | true , false |
| interval | Duration of change images slider time | 5000 | Millisecond |