I'm showing a bunch of images using react-responsive-carousel but when the images are more than a certain size i.e. the thumbnail section is scrollable, the last thumbnail is never in the view. For now I have put in the horizontal scroll, but I want to know what is the issue with the normal implementation. Please help me in solving this issue. Here's the code:
import React, { Component } from "react";
import { connect } from 'react-redux';
import axios from 'axios';
import { Row, Col, message, Spin } from 'antd';
import { Carousel } from 'react-responsive-carousel';
import "../../../asset/style/manualmode/saved_images_app.css";
import "react-responsive-carousel/lib/styles/carousel.min.css";
class SavedImagesApp extends Component {
constructor(props) {
super(props);
this.state = {
isFetching: false,
images: [],
}
}
componentDidMount = () => {
this.getAllImages();
}
getAllImages = () => {
this.setState({
isFetching: true,
});
let url = some_url'
axios.get(url)
.then(response => {
if (response.status === 200) {
this.setState({
isFetching: false,
images: response.data,
});
}
else {
console.log(response);
message.error("Not able to fetch images!!", 2.5);
this.setState({
isFetching: false,
images: [],
});
}
})
.catch(err => {
console.log(err);
message.error("Not able to fetch images!!", 2.5);
this.setState({
isFetching: false,
images: [],
});
})
}
getSlides = () => {
let slides = [];
for(let i = 0; i < this.state.images.length; i++) {
let url = some_url' + this.state.images[i];
slides.push(
<div>
<img src={url} />
</div>
);
}
return slides;
}
render() {
return (
<Row className="app-parent overlayed-component saved-images-app-width">
<div>
<Spin spinning={this.state.isFetching}>
<Row>
<Col span={24}>
<Carousel infiniteLoop useKeyboardArrows>
{this.getSlides()}
</Carousel>
</Col>
</Row>
</Spin>
</div>
</Row>
)
}
}
const mapStateToProps = (state) => {
return {
}
}
export default connect(mapStateToProps)(SavedImagesApp);
