响应式轮播，在React中更改移动设备上的itemsToShow

Question

我正在尝试在React上制作一个响应式的旋转木马。我想在桌面上显示3个项目，在移动设备上显示1个项目。所以我把3设为itemsToShow，但是有没有办法在手机上把它设为1呢？

import React from "react";
import Carousel from "react-elastic-carousel";
import { Container } from "react-bootstrap";

export const SimpleCarousel = () => (
    <Container>
      <div className="carousel">
        <h4 className="title">Title</h4>
        <Carousel itemsToShow={3} focusOnSelect={true}>
          <Cart />
          <Cart />
          <Cart />
          <Cart />
          <Cart />
          <Cart />
          <Cart />
          <Cart />
          <Cart />
          <Cart />
          <Cart />
        </Carousel>
      </div>
    </Container>
);

Answer 1

我建议你在这里查看他们的文档https://sag1v.github.io/react-elastic-carousel/

我相信这就是你的答案。您必须以数组的形式提供此设置。

​

​