https://github.com/one89/react-carouselize

Transform everything in a simple and customizable carousel
https://github.com/one89/react-carouselize

Last synced: 14 days ago
JSON representation

Transform everything in a simple and customizable carousel

• Host: GitHub
• URL: https://github.com/one89/react-carouselize
• Owner: fortwo
• License: mit
• Created: 2019-02-20T16:53:02.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T13:21:20.000Z (over 2 years ago)
• Last Synced: 2025-03-25T05:34:53.505Z (21 days ago)
• Language: JavaScript
• Size: 2.69 MB
• Stars: 1
• Watchers: 1
• Forks: 4
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-carouselize - Transform everything in a simple and customizable carousel. (UI Components / Carousel)

README

        
![npm](https://img.shields.io/npm/v/react-carouselize.svg)

![travis build](https://travis-ci.org/one89/react-carouselize.svg?branch=master)

[![Coverage Status](https://coveralls.io/repos/github/one89/react-carouselize/badge.svg?branch=master)](https://coveralls.io/github/one89/react-carouselize?branch=master)

# React-Carouselize

The simplest carousel component you can find in the React ecosystem.

## Getting Started

1. Install the package with `yarn add react-carouselize` or `npm install --save react-carouselize`

2. Import the component

```javascript

import Carouselize from 'react-carouselize';

```

3. Wrap whatever you want to be a carousel

```javascript

  ....

```

## Properties

| Name | Type | Default value | Required | Description |

| ---- | ---- | ------------- | -------- | ----------- |

| duration | `number` | `5000` | no | Animation duration in milliseconds |

| animation | `string` | `v-scroll` | no | One of `v-scroll` (vertical scroll), `h-scroll` (horizontal scroll) or `fade` |

| navigation | `string` | `left` | no | Position of bullets, between `top`, `right`, `bottom`, `left` |

| enableNavigation | `boolean` | `true` | no | Enable/disable click on bullets |

| enableKeys | `boolean` | `true` | no | Enable/disable scrolling with left or right keys |

## Contibuting

Check the related file [CONTRIBUTING](https://github.com/one89/react-carouselize/blob/master/CONTRIBUTING.md)