How to reduce the number of product visible on my react carousel?

Question

I have created a product carousel with react, it has 10 products, but I only want a max of 4 products to display at any one time, I tried reducing the width but that didn't work. Also had a look at the documentation for the carousel but couldn't find a solution for this https://www.npmjs.com/package/pure-react-carousel#component-properties-props

This is the git repo for the carousel https://github.com/RMP1992/react-product-carousel

react Carousel component

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

You can use Array#filter method to take first n elements from array.

{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>
                   
               ))
               ))}

Also, you can use lodash take method https://lodash.com/docs/4.17.15#take

Answer 2

I see you haven't imported their css yet. Add this line to your App component and delete all your custom css as well. I think everything will work just fine.

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