Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lakshya-dhariwal/react-hot-carousel
A carousel component that renders anything given between the tags, be it an image, text or a custom JSX element!
https://github.com/lakshya-dhariwal/react-hot-carousel
image-gallery image-slider npm-packages react-carousel react-components reactjs
Last synced: 16 days ago
JSON representation
A carousel component that renders anything given between the tags, be it an image, text or a custom JSX element!
- Host: GitHub
- URL: https://github.com/lakshya-dhariwal/react-hot-carousel
- Owner: lakshya-dhariwal
- License: mit
- Created: 2022-07-28T17:52:51.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-08-16T01:32:25.000Z (over 2 years ago)
- Last Synced: 2024-11-20T06:02:02.648Z (about 1 month ago)
- Topics: image-gallery, image-slider, npm-packages, react-carousel, react-components, reactjs
- Language: TypeScript
- Homepage: https://react-hot-carousel.netlify.app
- Size: 804 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🔥 react-hot-carousels
Build your own customized smoking hot carousels
[](https://npmjs.com/package/react-hot-carousel)
[](https://npmjs.com/package/react-hot-carousel)
## 💡 Project Description
A `carousel` component that renders anything given between the tags, be it an image, text or a custom JSX element!
## 🔧 Installation
```shell
npm install react-hot-carousel
```
or
```shell
yarn add react-hot-carousel
```
## 📦 Demo
A [demo](https://react-hot-carousel.netlify.app/) is worth a thousand words!
```tsx
import Carousel from 'react-hot-carousel'
const Example = () => {
return (
}
nextButton={}
navigationIndicator={}
activeNavigationIndicator={}
carouselCustomContainerStyles={display:'flex'...}
navigationIndicatorContainerStyles={display:'flex'...}
autoPlayInterval={6}>
...
);
};
export default Example;
```
## 🖇️ Props
| Prop | Description | Type |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| Children | Elements that will form carousel slides | JSX.Element[] |
| previousButton | use this prop to over ride default previous slide button with your own styling , without having to add event listeners | JSX.Element (optional) |
| nextButton | use this prop to over ride default next slide button with your own styling , without having to add event listeners | JSX.Element (optional) |
| navigationIndicator | use this prop to over ride default slide navigation dots with your own styling , without having to add event listeners | JSX.Element (optional) |
| activeNavigationIndicator | use this prop to over ride default active slide indicator with your own styling , without having to add event listeners | JSX.Element (optional) |
| autoPlay | allow autoplaying of styles or not | Boolean |
| autoPlayInterval | number of seconds in which the next slide appears | number (optional) default 3 sec |
| carouselCustomContainerStyles | Give your own styles to carousel container | React.CSSProperties (optional) |
| navigationIndicatorContainerStyles | Give your own styles to carousel container | React.CSSProperties (optional) |
## 🚨 Forking this repo
Many people have contacted us asking if they can use this code for their own websites. The answer to that question is usually "yes", with attribution. There are some cases, such as using this code for a business or something that is greater than a personal project, that we may be less comfortable saying yes to. If in doubt, please don't hesitate to ask us.
We value keeping this site open source, but as you all know, _**plagiarism is bad**_. We spent a non-negligible amount of effort developing, designing, and trying to perfect this iteration of our website, and we are proud of it! All we ask is to not claim this effort as your own.
So, feel free to fork this repo. If you do, please just give us proper credit by linking back to this repo, https://github.com/lakshya-dhariwal/react-hot-carousel. Refer to this handy [quora post](https://www.quora.com/Is-it-bad-to-copy-other-peoples-code) if you're not sure what to do. Thanks!
## 📜 License
`react-hot-carousel` is available under the MIT license. See the `LICENSE` file for more info.
---