Реагировать на карусель: почему изображения появляются в виде списка, а не в карусели

Question

У меня проблема с размещением изображений внутри карусели.В настоящее время каждое изображение идет по отдельности, довольно скользко в карусели.

Пожалуйста, помогите мне исправить мою ошибку.

Jxs

render()
    {
        var banquetImg = this.props.IMG_BASE + this.props.RESTAURANT_BANNER_PATH
      return (
        <div className="photosSection">
          {
            this.props.banquetImageList.length != 0
            ?
              <div className="body">
                <div className="row">
                    {
                    this.props.banquetImageList.map(function (row, i)
                    { 
                      return(
                                    <Carousel showArrows={true} key={row.RestaurantAttachmentId}>
                                          <div key={row.RestaurantAttachmentId} className={"row"}>
                                            <img src={banquetImg + row.FileName} key={row.RestaurantAttachmentId}/>
                                            <p className="get-final-price">Get Final Price</p>
                                          </div>
                                        </Carousel>
                                      )
                      }, this)
                  }
                          </div>

              </div>
              :
                ""
          } 
        </div>
    );
  }

Answer 1

Вы должны отобразить banquetImageList в Carousel,

<div className="row">
  <Carousel showArrows={true} key={row.RestaurantAttachmentId}>
     {this.props.banquetImageList.map((row, i) =>
         <div key={row.RestaurantAttachmentId} className={"row"}>
             <img src={banquetImg + row.FileName} key={row.RestaurantAttachmentId}/>
              <p className="get-final-price">Get Final Price</p>
         </div>
     )}
  </Carousel>   
</div>