How to Create a Carousel Using React Bootstrap: Step-by-Step Guide with Source Code (2023)

const { Carousel, CarouselItem, CarouselControl, CarouselIndicators, CarouselCaption } = Reactstrap;

const items = [
{
src: ‘https://via.placeholder.com/800×400’,
altText: ‘Slide 1’,
caption: ‘Slide 1’
},
{
src: ‘https://via.placeholder.com/800×400’,
altText: ‘Slide 2’,
caption: ‘Slide 2’
},
{
src: ‘https://via.placeholder.com/800×400’,
altText: ‘Slide 3’,
caption: ‘Slide 3’
}
];

class Example extends React.Component {
constructor(props) {
super(props);
this.state = { activeIndex: 0 };
this.next = this.next.bind(this);
this.previous = this.previous.bind(this);
this.goToIndex = this.goToIndex.bind(this);
}

next() {
const nextIndex = this.state.activeIndex === items.length – 1 ? 0 : this.state.activeIndex + 1;
this.setState({ activeIndex: nextIndex });
}

previous() {
const nextIndex = this.state.activeIndex === 0 ? items.length – 1 : this.state.activeIndex – 1;
this.setState({ activeIndex: nextIndex });
}

goToIndex(newIndex) {
this.setState({ activeIndex: newIndex });
}

render() {
const { activeIndex } = this.state;

const slides = items.map(item => {
return (
{}}>

);
});

return (

);
}
}

ReactDOM.render(, document.getElementById(‘root’));