1

我正在使用 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，并且可以使用点和箭头进行导航。相反，我想同时显示所有三个部分，并使用箭头沿着轮播。

有人看到我的代码有问题吗？

让我知道。

现在的情况： 截屏

4

1 回答 1

1

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

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

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

于 2021-08-11T08:59:54.550 回答