AntD Carousel отображает только первый div

Question

Это суть Carousel из моего кода.

<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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>

Отображается только первая div.new-offers-item. Как получить второй и другие для отображения?

Answer 1

Это душа, которая дала желаемый результат. Добавлено еще 2 .new-offers-item.

const carouselSettings = {
      arrows: true,
      slidesToShow: 3,
      slidesToScroll: 1
    };

Затем добавьте const carouselSettings к компоненту Carousel:

<Carousel {...carouselSettings}>...</Carousel>.

На основе react-slick документов и игровой площадки в https://github.com/akiran/react-slick.

AntD Carousel не размещает стрелки на html-макете, когда количество элементов внутри карусели равно slidesToShow. Стрелки button с transparent по умолчанию вам нужно поместить изображение стрелки внутри button с. Классы css для button s: .ant-carousel .slick-prev и .ant-carousel .slick-next.

.

Answer 2

это так, как задумано, это показывает, что первый элемент является текущим, и для перехода к следующему элементу вы можете нажать на навигацию. Вы можете установить фон элемента новых предложений, чтобы увидеть навигацию. вы можете обратиться сюда

https://codesandbox.io/s/nn44020wzp