Last thumbnail not coming in the view (react-responsive-carousel)

Question

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

Answer 1

I got the solution by removing the margin-right from .carousel .thumb

.carousel .thumb { margin-right: 0px; }