import React from
'react'
import
'bootstrap/dist/css/bootstrap.min.css'
;
import {
CarouselControl,
Carousel,
CarouselItem,
CarouselIndicators,
} from
'reactstrap'
;
function
App() {
const [activeIndex, setActiveIndex] = React.useState(0);
const [animating, setAnimating] = React.useState(
false
);
const items = [
{
caption:
'Sample Caption One'
,src:
altText:
'Slide One'
},
{
caption:
'Sample Caption Two'
,src:
altText:
'Slide Two'
}
];
const itemLength = items.length - 1
const previousButton = () => {
if
(animating)
return
;
const nextIndex = activeIndex === 0 ?
itemLength : activeIndex - 1;
setActiveIndex(nextIndex);
}
const nextButton = () => {
if
(animating)
return
;
const nextIndex = activeIndex === itemLength ?
0 : activeIndex + 1;
setActiveIndex(nextIndex);
}
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;