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

它是设计好的，它将第一项显示为当前项，要移至下一项，可以单击导航。您可以设置new-offers-item的背景以查看导航。您可以在这里参考

https://codesandbox.io/s/nn44020wzp

Answer 2

由于要在其轮播中使用光滑的滑块，因此您应该参考其API

更准确地说，您需要使用prop：“ slidesToShow”才能显示所需的幻灯片数量。

例如：

const settings = {
      dots: true,
      slidesToShow: 3,
      slidesToScroll: 1
};

Answer 3

这是产生预期结果的灵魂。再添加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的游乐场。

当“轮播”中的项目数等于slidesToShow时，AntD轮播不会将箭头放置到html布局。 button的箭头默认为transparent，您需要将箭头图像放在button内。 button的css类是.ant-carousel .slick-prev和.ant-carousel .slick-next。