AntD Carousel only displays the first div in it - antd

Question

This is the Carousel gist from my code.
<Carousel arrows={true}>
<div className='new-offers-item'>
<div className='new-offers-item-bg'>
<div className='new-offers-item-rent-tag'>TEXT HERE</div>
<div className='new-offers-item-favourite' />
<div className='new-offers-posted-at'>ANOTHER TEXT HERE, 10:44</div>
</div>
<div className='new-offers-item-location-rate'>
<div className='new-offers-item-location'>street address, 5<br />CC Espiral,<br /> 1 floor</div>
<div className='new-offers-item-rate'>
<div>
<span className='new-offers-item-rate-value'>240 000 </span>
<span className='new-offers-item-rate-unit'>abcd.</span>
</div>
</div>
</div>
<div className='new-offers-item-city-street'>
<span>City</span>
<span> </span>
<span>Address1</span>
</div>
<div className='new-offers-item-description'>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div>
<img src={sqM} />
</div>
<p>
<span>Total</span>
<span>600</span>
</p>
<p>
<span> </span>
<span className='span-divider'>/</span>
</p>
<p>
<span>Sale</span>
<span>300</span>
</p>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<p>
<span>Per meter</span>
</p>
<p>
<span>6 700 </span>
<span>unit<sup>2</sup></span>
</p>
</div>
</div>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div className='new-offers-item-description-second'>
<img src={bldgIcon} />
<span className='item-type'>Торговый центр</span>
</div>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<div className='new-offers-item-description-second'>
<img src={doorsIcon} />
<span className='item-type'>10 floor</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className='new-offers-item'>
<div className='new-offers-item-bg'>
<div className='new-offers-item-rent-tag'>TEXT HERE</div>
<div className='new-offers-item-favourite' />
<div className='new-offers-posted-at'>ANOTHER TEXT HERE, 10:44</div>
</div>
<div className='new-offers-item-location-rate'>
<div className='new-offers-item-location'>street address, 5<br />CC Espiral,<br /> 1 floor</div>
<div className='new-offers-item-rate'>
<div>
<span className='new-offers-item-rate-value'>240 000 </span>
<span className='new-offers-item-rate-unit'>abcd.</span>
</div>
</div>
</div>
<div className='new-offers-item-city-street'>
<span>City</span>
<span> </span>
<span>Address1</span>
</div>
<div className='new-offers-item-description'>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div>
<img src={sqM} />
</div>
<p>
<span>Total</span>
<span>600</span>
</p>
<p>
<span> </span>
<span className='span-divider'>/</span>
</p>
<p>
<span>Sale</span>
<span>300</span>
</p>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<p>
<span>Per meter</span>
</p>
<p>
<span>6 700 </span>
<span>unit<sup>2</sup></span>
</p>
</div>
</div>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div className='new-offers-item-description-second'>
<img src={bldgIcon} />
<span className='item-type'>Торговый центр</span>
</div>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<div className='new-offers-item-description-second'>
<img src={doorsIcon} />
<span className='item-type'>7 floor</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Carousel>
Only the first div.new-offers-item gets displayed.
How do I get the second one and others to display?

Answer 1

Since antd using slick slider for their Carousel, you should refer to their API
To be more precise, you will need to use prop: "slidesToShow" in order to show the numbers of slides that you need.
For Example:
const settings = {
dots: true,
slidesToShow: 3,
slidesToScroll: 1
};

Answer 2

It is as designed. This shows the first item as current and to move to the next item, you can click on the navigation.
You can set the background of new-offers-item to see the navigation. You can refer to the example here:
https://codesandbox.io/s/nn44020wzp

Answer 3

This is the soultion that produced the desired outcome. Added 2 more
.new-offers-item.
const carouselSettings = {
arrows: true,
slidesToShow: 3,
slidesToScroll: 1
};
Then add the const carouselSettings to the Carousel component:
<Carousel {...carouselSettings}>...</Carousel>.
Based on react-slick docs and playground at https://github.com/akiran/react-slick.
AntD Carousel doesn't place the arrows to the html layout when the number of items inside the Carousel equals to slidesToShow. The arrows which are buttons are transparent by default you'd need to put an arrow image inside the buttons. The css classes for buttons are .ant-carousel .slick-prev and .ant-carousel .slick-next.