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

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 enter image description here

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

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>
cssreactjscarouselreact-bootstrap


Solution 1:[1]

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/)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Félix Lgr

Related Questions