Images not show in ReactJS carousal slider - css

Question

I'm trying to use a Carousel slider on my website but all of the images are not showing. I'm using an example provided by a library but it's not working.
I've linked the Bootstrap CDN in my HTML file but it does not help.
import React, { Component } from 'react';
import {Carousel,} from 'react-bootstrap';
import Carousel from 'nuka-carousel';
class Slider extends Component {
render() {
return (
<Carousel autoplay={true}>
<img src="../asset/img1.jpg" />
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide2" />
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide3" />
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide4" />
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide5" />
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide6" />
</Carousel>
);
}
}
export default Slider;

Answer 1

You are using 2 different Carousels from 2 different library's I'm sure this will cause some issues.
Remove import Carousel from 'nuka-carousel';
I would stick to using react-bootstrap version
install package: npm install --save react-bootstrap
Add stylesheet to your HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Make sure you are importing it properly like so:
import {Carousel} from 'react-bootstrap';
The example from the actual react-bootstrap
class ControlledCarousel extends React.Component {
constructor(props, context) {
super(props, context);
this.handleSelect = this.handleSelect.bind(this);
this.state = {
index: 0,
direction: null
};
}
handleSelect(selectedIndex, e) {
alert(`selected=${selectedIndex}, direction=${e.direction}`);
this.setState({
index: selectedIndex,
direction: e.direction
});
}
render() {
const { index, direction } = this.state;
return (
<Carousel
activeIndex={index}
direction={direction}
onSelect={this.handleSelect}
>
<Carousel.Item>
<img width={900} height={500} alt="900x500" src="/carousel.png" />
<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 width={900} height={500} alt="900x500" src="/carousel.png" />
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img width={900} height={500} alt="900x500" src="/carousel.png" />
<Carousel.Caption>
<h3>Third slide label</h3>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
}
}
render(<ControlledCarousel />);