React bootstrap carousel slider example
Hello Guys,
How to use bootstrp carousel slider in reacr js. then we are provide example of react bootstrap slider. first you have to import 'react-bootstrap/Carousel' component. if you get 'Carousel' is not defined react/jsx-no-undef this type of error then you have to import this class.
import React from 'react'
import Carousel from 'react-bootstrap/Carousel'
class BootstrapSlider extends React.Component{
render(){
return(
<Carousel>
<Carousel.Item>
<img
className="d-block w-100"
src="/upload/thumbnail/month.png"
alt="First slide"
/>
<Carousel.Caption>
<h3>NiceSnippets.com slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="/upload/thumbnail/year.png"
alt="Third slide"
/>
<Carousel.Caption>
<h3>NiceSnippets.com slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="/upload/thumbnail/footer-social-icon-design-example-using-bootstrap-4.png"
alt="Third slide"
/>
<Carousel.Caption>
<h3>NiceSnippets.com slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
)
}
}
export default BootstrapSlider;
- How to Reactive Forms with Validation in Angular 18?
- Reactjs Props Example With Function and Class Components
- React Color Picker Example With Change Event
- How to Hide and Show Multiple Div in React ?
- React js File Upload Example With Axios
- How to Resize, Crop, Compress Images Before Uploading In ReactJS?
- How to Send Data From React to Node JS Express?
- Reactjs String Replace Example