Skip to content

All topics  /  React

React bootstrap carousel slider example

React ·

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;