How to control the number of items shown in react-responsive-carousel?

Question

I'm using react-responsive-carousel in my React Project. I want to control the number of items shown on screen, (3 items in desktop view and 1 in mobile view). At first, I tried to add a prop named "slidesToShow" as suggested by Chatgpt (although I couldn't find this prop in official documentation, anyways, tried to give it a try), but it didn't work. Then, I did this through css by adding the width property in "slide" class, that actually worked, but it shows weird behavior while scrolling through the images. It starts from third image and shows some frames blank. Looks like we need to add some logic like itemsPerPage, itemOffset, etc but not getting how to add here, just like react-paginate gives us the freedom to write our own logics for scrolling. Here is how my .js code looks like:

import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";
import "./CustomIndicator.css";

export default function App() {
  return (
    <Carousel infiniteLoop slidesToShow={3}>
      <div>
        <p>01</p>
        <img src={"1.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>02</p>
        <img src={"2.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>03</p>
        <img src={"3.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>04</p>
        <img src={"1.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>05</p>
        <img src={"2.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>06</p>
        <img src={"3.jpeg"} className="w-full h-full" />
      </div>
    </Carousel>
  );
}

And this is the styles file:

.carousel .control-dots .dot {
  border-radius: 0% !important;
  width: 20px !important;
  height: 2px !important;
}

.carousel .control-dots .dot:active {
  border-radius: 0% !important;
  width: 20px !important;
  height: 5px !important;
}

@media only screen and (max-width: 600px) {
  .slide {
    min-width: 50% !important;
  }
}

/* For all other screen sizes, display 3 items */
.slide {
  min-width: 50% !important;
}

And following is the link of codesandbox sample for better demonstration. https://codesandbox.io/s/how-to-control-carousel-items-gl6pov?file=/src/CustomIndicator.css

Answer 1

You can use itemsToShow and give it the number of items you want to show example:

<Carousel isRTL={false} itemsToShow={3}>
  <div>
    <p>01</p>
    <img src={"1.jpeg"} className="w-full h-full" />
  </div>
  <div>
    <p>02</p>
    <img src={"2.jpeg"} className="w-full h-full" />
  </div>
  <div>
    <p>03</p>
    <img src={"3.jpeg"} className="w-full h-full" />
  </div>
  <div>
    <p>04</p>
    <img src={"1.jpeg"} className="w-full h-full" />
  </div>
  <div>
    <p>05</p>
    <img src={"2.jpeg"} className="w-full h-full" />
  </div>
  <div>
    <p>06</p>
    <img src={"3.jpeg"} className="w-full h-full" />
  </div>
  </Carousel>

Answer 2

I have a better option for you showing pictures in a mannered way. Try the react-slick and slick-carousel. Just go to npm by that link and see more here You can use settings like that for all devices. You can also explore more about it on google. And Please try to search more efficiently than wasting a lot of time. Please try my solution it's will helpful for you Thank you very much.

const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: slideData>0?slideData:3,
slidesToScroll:  slideData>0?slideData:3,
arrows: true,
className: "myCustomCarousel slider variable-width",
responsive: [
  {
    breakpoint: 950,
    settings: {
      slidesToShow: slideData>0?slideData:2,
      slidesToScroll: slideData>0?slideData:2,
      initialSlide: slideData>0?slideData:2,
      dots: true,
    infinite: true,
    arrows: true,
    className: "myCustomCarousel",
    }
  },
  {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      initialSlide: 1,
    infinite: true,
    arrows: true,
    className: "myCustomCarousel",
    }
  }
]

};

Answer 3

According to the docs you can use centerMode property to true and also to set the value for centerSlidePercentage, therefore if you need 2 slides, set the value to 50 and so on.

Check next example:

  <Carousel
    centerMode
    centerSlidePercentage={50}
    //other props
  >
    {
      /// your children
    }
  </Carousel>