Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The Carousel component allows the user to show the sliding item, and it is used when there is a group of content on the same level. We can use the following approach in ReactJS to use the ReactJS Reactstrap Carousel Component.
Carousel Props:
- activeIndex: It is used to control the current active visible slide.
- next: It is a callback function that is triggered when the next button is clicked.
- previous: It is a callback function that is triggered when the previous button is clicked.
- keyboard: It is used to indicate whether the carousel should react to the keyboard event or not.
- pause: It is used to pause the slide based on different mouse events.
- ride: It is used to autoplay the carousel after the user manually cycles the first item.
- interval: It is used to delay time between automatically cycling movement for these items.
- children: It is used to pass the children element to this component.
- mouseEnter: It is a callback function that is triggered when the mouse enters the Carousel.
- mouseLeave: It is a callback function that is triggered when the mouse exits the Carousel.
- slide: It is used to enable the animation between slides.
- cssModule: It is used to denote the CSS module for styling.
- enableTouch: It is used to indicate whether the touch gestures on the Carousel works or not.
CarouselItem Props:
- tag: It is used to denote the tag for this component.
- in: It is used to denote whether to show an item or not.
- cssModule: It is used to denote the CSS module for styling.
- children: It is used to pass the children element to this component.
- slide: It is used to enable the animation between slides.
CarouselControl Props:
- direction: It is used to denote the direction like next or previous.
- onClickHandler: It is a callback function that is triggered when it is clicked.
- cssModule: It is used to denote the CSS module for styling.
- directionText: It is used to denote the direction text.
CarouselIndicators Props:
- items: It is used to denote the items array.
- activeIndex: It is used to control the current active visible slide.
- cssModule: It is used to denote the CSS module for styling.
- onClickHandler: It is a callback function that is triggered when it is clicked.
CarouselCaption Props:
- captionHeader: It is used to denote the caption header value.
- captionText: It is used to denote the caption text value.
- cssModule: It is used to denote the CSS module for styling.
UncontrolledCarousel Props:
- items: It is used to denote the items array.
- indicators: It is used to show a set of slide position indicators.
- controls: It is used to indicate whether it has controls or not.
- autoPlay: It is used to indicate whether it can be auto-played or not.
Creating React Application And Installing Module:
-
Step 1: Create a React application using the following command:
npx create-react-app foldername
-
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
-
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install reactstrap bootstrap
Project Structure: It will look like the following.
Project Structure
Example 1: Now write down the following code in the App.js file. Here, we have used the Carousel component with the carousel control buttons.
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { CarouselControl,
Carousel,
CarouselItem,
CarouselIndicators,
} from 'reactstrap';
function App() {
// State for Active index
const [activeIndex, setActiveIndex] = React.useState(0);
// State for Animation
const [animating, setAnimating] = React.useState(false);
// Sample items for Carousel
const items = [
{
caption: 'Sample Caption One',src:
altText: 'Slide One'
},
{
caption: 'Sample Caption Two',src:
altText: 'Slide Two'
}
];
// Items array length
const itemLength = items.length - 1
// Previous button for Carousel
const previousButton = () => {
if (animating) return;
const nextIndex = activeIndex === 0 ?
itemLength : activeIndex - 1;
setActiveIndex(nextIndex);
}
// Next button for Carousel
const nextButton = () => {
if (animating) return;
const nextIndex = activeIndex === itemLength ?
0 : activeIndex + 1;
setActiveIndex(nextIndex);
}
// Carousel Item Data
const carouselItemData = items.map((item) => {
return (
<CarouselItem
key={item.src}
onExited={() => setAnimating(false)}
onExiting={() => setAnimating(true)}
>
<img src={item.src} alt={item.altText} />
</CarouselItem>
);
});
return (
<div style={{
display: 'block', width: 320, padding: 30
}}>
<h8>ReactJS Reactstrap Carousel Component</h8>
<Carousel previous={previousButton} next={nextButton}
activeIndex={activeIndex}>
<CarouselIndicators items={items}
activeIndex={activeIndex}
onClickHandler={(newIndex) => {
if (animating) return;
setActiveIndex(newIndex);
}} />
{carouselItemData}
<CarouselControl directionText="Prev"
direction="prev" onClickHandler={previousButton} />
<CarouselControl directionText="Next"
direction="next" onClickHandler={nextButton} />
</Carousel>
</div >
);
} export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: Now write down the following code in the App.js file. Here, we have used the Carousel component without the carousel control buttons.
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Carousel,
CarouselItem,
CarouselIndicators,
} from 'reactstrap';
function App() {
// State for Active index
const [activeIndex, setActiveIndex] = React.useState(0);
// State for Animation
const [animating, setAnimating] = React.useState(false);
// Sample items for Carousel
const items = [
{src:
},
{src:
}
];
// Items array length
const itemLength = items.length - 1
// Previous button for Carousel
const previousButton = () => {
if (animating) return;
const nextIndex = activeIndex === 0 ?
itemLength : activeIndex - 1;
setActiveIndex(nextIndex);
}
// Next button for Carousel
const nextButton = () => {
if (animating) return;
const nextIndex = activeIndex === itemLength ?
0 : activeIndex + 1;
setActiveIndex(nextIndex);
}
// Carousel Item Data
const carouselItemData = items.map((item) => {
return (
<CarouselItem
key={item.src}
onExited={() => setAnimating(false)}
onExiting={() => setAnimating(true)}
>
<img src={item.src} alt={item.altText} />
</CarouselItem>
);
});
return (
<div style={{
display: 'block', padding: 30
}}>
<h1>ReactJS Reactstrap Carousel Component</h1>
<Carousel previous={previousButton} next={nextButton}
activeIndex={activeIndex}>
<CarouselIndicators items={items}
activeIndex={activeIndex}
onClickHandler={(newIndex) => {
if (animating) return;
setActiveIndex(newIndex);
}} />
{carouselItemData}
</Carousel>
</div >
);
} export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://reactstrap.github.io/components/carousel/