React corousel of bootstrap is not styled as how it is supposed to be-CodePudding

Now i want to remove the previous and next and also I want to style the slider which is shown as if it is very old , it's not modern

Acutally i want it to look something like how the react-bootstrap claims their carousel looks like : Like this:

My code snippet is as follows

<Carousel pause="hover">
                {product.images &&
                  product.images.map((image) => (
                    <Carousel.Item key={image.public_id}>
                      <img
                        className="d-block w-100"
                        src={image.url}
                        alt={product.title}
                      />
                    </Carousel.Item>
                  ))}
              </Carousel>

CodePudding user response：

I think the problem comes from your css. Did you put the bootstrap one ?

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

and I suggest "antd" instead of bootstrap (https://ant.design/components/carousel/)