如何减少react旋转木马上可见的产品数量？

Question

我用react创建了一个产品旋转木马，它有10个产品，但我只想在任何时候显示最多4个产品，我试图减少宽度，但这不起作用。我还查看了轮播的文档，但找不到此https://www.npmjs.com/package/pure-react-carousel#component-properties-props的解决方案

这是carousel https://github.com/RMP1992/react-product-carousel的git代码库。

react Carousel组件

import React from 'react';
import {data} from'../data/data';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext, Image } from 'pure-react-carousel';
import './Carousel.css';
import Card from './Card';
export default class extends React.Component {
    render() {
      return (
        <CarouselProvider
          naturalSlideWidth={100}
          naturalSlideHeight={125}
          currentSlide={4}
          totalSlides={10}
          visibleSlides={4}
          
 
        >
        <Slider>
        {data.map(item =>(
               item.carouselData.map(product => (
                   
                   <Slide >
                        <Image><img src={product.productImageUrl}/></Image>
                        <p>{product.name}</p>
                        <p>£{product.price.formattedValue}</p>
                   </Slide>
                   
               ))
               ))}
        </Slider>
        
        <ButtonBack>Back</ButtonBack>
        <ButtonNext>Next</ButtonNext>
        </CarouselProvider>
      );
    }
  }

CSS

    .image___xtQGH {
    display: block;
   
}
.carousel__slide {
    list-style-type: none;
    padding-bottom: unset !important;
    width: 306px !important;
    border: black solid 1px;
    margin: 0 10px !important;
}
.carousel__slider-tray {
    display: flex;
    flex-direction: row;
}

​

​

Answer 1

我看到你还没有导入他们的css。将此行添加到您的App组件中，并删除所有自定义css。我想一切都会很好的。

import "pure-react-carousel/dist/react-carousel.es.css";

Answer 2

您可以使用Array#filter方法从数组中获取第一个n元素。

{data.filter((item, index) => index < 4).map(item =>(
               item.carouselData.map(product => (
                   
                   <Slide >
                        <Image><img src={product.productImageUrl}/></Image>
                        <p>{product.name}</p>
                        <p>£{product.price.formattedValue}</p>
                   </Slide>
                   
               ))
               ))}

此外，您还可以使用lodash take方法https://lodash.com/docs/4.17.15#take