reactjs - How would i implement 3 col carousel using react-bootstrap carousel?

Question

I want to create a dynamic image slider where every time 3 items are shown on carousel,when i click on nextIcon on carousel,the first item will go back to the previous section,and the second item will be set on first column and third item will be set on second column, and the next item will be on the 3rd column.If a click on prevIcon,the opposite thing will be happened. And the image sources will come from database.

The below code snippet where i have implemented 1 col dynamic carousel using react-bootstrap library.

render() {
                return (
                    <Carousel activeIndex={this.state.index} onSelect={this.handleSelect}>
                        { this.state.users.map(function(user,index)
                            {
                                return(
                                    <Carousel.Item key= {index} >
                                        <img
                                            className="d-block w-100"
                                            src= { user.thumbnailUrl }
                                            alt= "Load Images"
                                        />
                                        <Carousel.Caption>
                                            <h3> { user.title }</h3>
                                        </Carousel.Caption>
                                        
                                    </Carousel.Item>
                                );
                        })}
                    </Carousel>
                )
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

question from:https://stackoverflow.com/questions/66056957/how-would-i-implement-3-col-carousel-using-react-bootstrap-carousel

Answer 1

Waitting for answers