react-bootstrap-carousel
This project support carousel components built with React.
Install
npm i --save react-bootstrap-carouselGetting Started
import ReactBootstrapCarousel from "react-bootstrap-carousel";
import "bootstrap/dist/css/bootstrap.css";
import "react-bootstrap-carousel/dist/react-bootstrap-carousel.css";Bootstrap@3.3.7 demo
Bootstrap@4.3 demo
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 | 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 |