反应多轮播每张幻灯片只显示一个元素

Question

我正在使用 react multi carousel 库来显示一些 div。如下所示，该代码似乎在理论上有效：

import * as React from "react";
import "../styles/Home.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

const responsive = {
    superLargeDesktop: {
      // the naming can be any, depends on you.
      breakpoint: { max: 4000, min: 3000 },
      items: 5
    },
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 5
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 5
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 5
    }
  };

const IndicatorCarousel = () => {
  return (
    <div className="IndicatorCarousel">
        <div className="IndicatorCarouselText">
            Select your preferred stock indicators
        </div>
        <br></br>
        <Carousel 
            swipeable={false}
            draggable={false}
            showDots={true}
            responsive={responsive}
            ssr={true} // means to render carousel on server-side.
            infinite={true}
            autoPlaySpeed={1000}
            keyBoardControl={true}
            customTransition="all .5"
            transitionDuration={500}
            containerClass="carousel-container"
            removeArrowOnDeviceType={["tablet", "mobile"]}
            dotListClass="custom-dot-list-style"
            itemClass="carousel-item-padding-40-px"
        >
            <div className="IndicatorCarouselCard">
                Test
            </div>
            <div className="IndicatorCarouselCard">
                Test2
            </div>
            <div className="IndicatorCarouselCard">
                test3
            </div>
            <div className="IndicatorCarouselCard">
                test4
            </div>
            <div className="IndicatorCarouselCard">
                test5
            </div>
        </Carousel>
    </div>
  );
};

export default IndicatorCarousel;

但是，当我在浏览器中渲染轮播时，它只显示三个部分，每个部分都有一个单独的 div，并且可以使用点和箭头进行导航。相反，我想同时显示所有三个部分，并使用箭头沿轮播图移动。

有人发现我的代码有问题吗？

告诉我。

目前情况：

Answer 1

尝试在 Carousel 组件上将 centerMode 属性设置为 true。

    <Carousel 
       ...
       centerMode={true}
       ...
    >

或者，您可以尝试将partialVisible 设置为true