Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skycloud1030/react-bootstrap-carousel
React part of bootstrap carousel
https://github.com/skycloud1030/react-bootstrap-carousel
bootstrap3 bootstrap4 carousel react
Last synced: 28 days ago
JSON representation
React part of bootstrap carousel
- Host: GitHub
- URL: https://github.com/skycloud1030/react-bootstrap-carousel
- Owner: skycloud1030
- License: mit
- Created: 2017-03-10T10:48:48.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:31:55.000Z (almost 2 years ago)
- Last Synced: 2024-09-28T16:06:42.988Z (about 1 month ago)
- Topics: bootstrap3, bootstrap4, carousel, react
- Language: JavaScript
- Homepage:
- Size: 5.34 MB
- Stars: 11
- Watchers: 2
- Forks: 34
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-bootstrap-carousel
[](https://travis-ci.org/skycloud1030/react-bootstrap-carousel)
[](https://coveralls.io/github/skycloud1030/react-bootstrap-carousel?branch=master)
[](https://www.npmjs.com/package/react-bootstrap-carousel)
[](LICENSE)
[](https://www.npmjs.com/package/react-bootstrap-carousel)
This project support carousel components built with [React](https://github.com/facebook/react).
## Install
```sh
npm i --save react-bootstrap-carousel
```
## Getting Started
```js
import ReactBootstrapCarousel from "react-bootstrap-carousel";
import "bootstrap/dist/css/bootstrap.css";
import "react-bootstrap-carousel/dist/react-bootstrap-carousel.css";
```
## [email protected] demo
- [preview](https://skycloud1030.github.io/react-bootstrap-carousel/example/demoV3.html)
- [code](https://github.com/skycloud1030/react-bootstrap-carousel/blob/gh-pages/app/demoV3.jsx)
## [email protected] demo
- [preview](https://skycloud1030.github.io/react-bootstrap-carousel/example/demoV4.html)
- [code](https://github.com/skycloud1030/react-bootstrap-carousel/blob/gh-pages/app/demoV4.jsx)
## Properties
| Props | Type | Description | Default |
| :----------------- | :----------------------- | :---------------------------------------------------------------------------------------------------------- | :------ |
| version | number | Bootstrap version 3 | version 4 | 3 |
| defaultActiveIndex | number | | 0 |
| slideshowSpeed | number | The amount of time to delay between automatically cycling an item | 7000 |
| animation | boolean | whether to show animation | true |
| autoplay | boolean | Whether to scroll automatically | true |
| wrap | boolean | Whether the carousel should cycle continuously or have hard stops | true |
| indicators | boolean | Whether to show the dots at the bottom of the gallery | true |
| leftIcon | ReactNode | | - |
| rightIcon | ReactNode | | - |
| onSelect | function(value: number ) | Callback function called after the current index changes | - |
| className | string | carousel-fade | "" | - |
| pauseOnVisibility | boolean | Stop autoplay when [visibilitychange](https://developer.mozilla.org/en-US/docs/Web/Events/visibilitychange) | false |
## Methods
| Name | Description |
| :-------- | :----------------------------------------- |
| slidePrev | Change current slide to previous slide |
| slideNext | Change current slide to next slide |
| goToSlide | Change current slide to given slide number |