reactjs - 如何减少我的反应轮播上可见的产品数量？

Question

我创建了一个带有反应的产品轮播，它有 10 个产品，但我只想一次最多显示 4 个产品，我尝试减小宽度，但没有奏效。还查看了轮播的文档，但找不到此https://www.npmjs.com/package/pure-react-carousel#component-properties-props的解决方案

这是轮播的 git 仓库https://github.com/RMP1992/react-product-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

您可以使用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>
                   
               ))
               ))}

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

Answer 2

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

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