CODEWITHSUNDEEP
reactjsbootstrap-4react-bootstrap
Nawaz Moin yaakuza
Nawaz Moin yaakuza

Reputation: 141

Remove previous arrow of carousel from react bootstrap

I am using React Bootstrap Carousel, I'm trying to remove the previous arrow of the controls, but I don't know how:

<Carousel>
    <Carousel.Item>
        <img
        className="d-block w-100"
        src="1.jpeg"
        style={{borderRadius:"15px"}}
        height="500"
        alt="First slide"
        />
        <Carousel.Caption>
            <h3>First 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="5.jpg"
        style={{borderRadius:"15px"}}
        height="500"
        alt="Third slide"
        />
        <Carousel.Caption>
            <h3>Second 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="3.jpg"
        style={{borderRadius:"15px"}}
        height="500"
        alt="Third slide"
        />
        <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </Carousel.Caption>
    </Carousel.Item>
</Carousel>

I'm new to react-bootstrap please help me with this task of removing the previous arrow.

Upvotes: 1

Views: 7845

Answers (5)

Md. AL Mohaiminul Islam Mahin
Md. AL Mohaiminul Islam Mahin

Reputation: 61

<Carousel controls={false}> // Hide next and previous buttons
 ....
</Carousel>

Upvotes: 6

Sohel Rana
Sohel Rana

Reputation: 31

You can try this

<Carousel indicators={false}>
 ....
</Carousel>

Upvotes: 3

Ziyaad Shiraz
Ziyaad Shiraz

Reputation: 341

It's quite easy. Just pass the prop "controls" into Carousel and give it a false value. don't forget the {} when passing in false

Upvotes: 3

Dennis
Dennis

Reputation: 158

Try explicitly overriding the indicator-related props of the Carousel component, like this:

<Carousel nextIcon="" nextLabel="">
  ...
</Carousel>

Documentation of Carousel's available props here.

Upvotes: 1

yuri
yuri

Reputation: 3400

Declare it as:

<Carousel prevIcon={<span aria-hidden="true" className="carousel-control-prev-icon" />} >
...
..
.
</Carousel>

From documentation.

Upvotes: 4

Related Questions