https://github.com/pstachula-dev/react-micro-carousel
React micro carousel
https://github.com/pstachula-dev/react-micro-carousel
carousel carousel-component carousel-slider headless nextjs react react-components reactjs slider tailwindcss
Last synced: 4 months ago
JSON representation
React micro carousel
- Host: GitHub
- URL: https://github.com/pstachula-dev/react-micro-carousel
- Owner: pstachula-dev
- License: mit
- Created: 2024-06-17T18:42:30.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-24T08:42:15.000Z (over 1 year ago)
- Last Synced: 2025-09-11T05:36:35.119Z (10 months ago)
- Topics: carousel, carousel-component, carousel-slider, headless, nextjs, react, react-components, reactjs, slider, tailwindcss
- Language: TypeScript
- Homepage: https://simple-headless-carousel.onrender.com/
- Size: 2.97 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Micro Carousel
## Links
- [Examples & Documentation](https://simple-headless-carousel.onrender.com/)
- [NPM](https://www.npmjs.com/package/react-micro-carousel)
## Features
- Extremely small package size (gzipped):
- Javascript: 2.6kB
- CSS: 1.5kB
- 0 external dependencies
- Full typescript support
- Built in with Tailwind, but you can always customize the styles
- Handling touch/mouse events
- Lazy image loading
- Responsive support
## How to use
### Main Tailwind 4.x:
`globals.css`
```css
@source "../node_modules/react-micro-carousel/dist";
```
### Legacy Tailwind 3.x:
`tailwind.config.ts`
```js
export default {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/react-micro-carousel/**/*.js",
],
} satisfies Config;
```
### Vanilla css (prebuild for Tailwind 4)
```js
import 'react-micro-carousel/styles.min.css';
```
### Components markup
```js
import {
Carousel,
CarouselProvider,
Counter,
DotsGroup,
NextButton,
PrevButton,
Slide,
} from 'react-micro-carousel';
Next
Prev
;
```
## Props documentation
### ``
Component is used to initialize the carousel context with configuration options and wrap the other components.
| Prop | Type | Default | Required |
| ------------- | --------- | ------- | -------- |
| children | ReactNode | | Yes |
| slideHeight | number | 0 | Yes |
| total | number | 0 | Yes |
| autoPlayDelay | number | false | No |
| slidesVisible | number | 1 | No |
| step | number | 1 | No |
| threshold | number | 0.25 | No |
| infinite | boolean | false | No |
| disableTouch | boolean | false | No |
| lazy | boolean | true | No |
| autoPlay | boolean | false | No |
### ``
A carousel that wraps the slides and provides the core functionality, such as scrolling to the next or previous slide.
| Prop | Type | Default | Required |
| ----------------- | --------- | ------- | -------- |
| children | ReactNode | | Yes |
| wrapperClassName | string | | No |
| carouselClassName | string | | No |
### ``
A single slide in a carousel.
| Prop | Type | Default | Required |
| --------- | --------- | ------- | -------- |
| children | ReactNode | | Yes |
| index | number | | Yes |
| className | string | | No |
### ``
A single dot.
| Prop | Type | Default | Required |
| ------------- | -------- | ------- | -------- |
| className | string | | No |
| colorActive | string | | No |
| colorInactive | string | | No |
| index | number | | Yes |
| disabled | boolean | | No |
| onClick | Function | | No |
### ``
A component that renders a group of dots, representing the slides in the carousel.
It provides auto generated dots for the carousel.
| Prop | Type | Default | Required |
| ------------- | -------- | ------- | -------- |
| className | string | | No |
| dotClassName | string | | No |
| colorActive | string | | No |
| colorInactive | string | | No |
| onClick | Function | | No |
### ``
| Prop | Type | Default | Required |
| --------- | --------- | ------- | -------- |
| className | string | | No |
| children | ReactNode | | Yes |
| onClick | Function | | No |
### ``
| Prop | Type | Default | Required |
| --------- | --------- | ------- | -------- |
| className | string | | No |
| children | ReactNode | | Yes |
| onClick | Function | | No |
### ``
| Prop | Type | Default | Required |
| --------- | ------ | ------- | -------- |
| className | string | | No |