How do I reduce the number of images that appear on my carousel?

Question

I have a carousel that renders some images with the lib react-responsive-carousel, I would like to know how it is possible to decrease the number of images that appear in my carousel.

At the large screen size, I render 3 images on my carousel, but when the screen gets smaller, I wanted to render fewer images. In the image below, it is easy to see that the carousel is with the pasted images when the screen is small.

I put my code into codesandbox.io

import React from "react";
import "./styles.css";
import { images } from "./carousel.data";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

export default function App() {
  const renderItems = images.map((img) => {
    return (
      <div key={img.id}>
        <div className="div-image">
          <img className="image" src={img.url} alt="" />
        </div>
        <div className="div-infos">
          <h3 className="info-title">Cases Title</h3>
          <span className="info-subtitle">Cases Subtitle</span>
        </div>
      </div>
    );
  });

  return (
    <div className="container-carousel">
      <div className="carousel-content">
        <Carousel
          centerMode
          showStatus={false}
          dynamicHeight={false}
          emulateTouch
          swipeScrollTolerance={50}
          centerSlidePercentage={30}
          showThumbs={false}
          infiniteLoop
          showIndicators
        >
          {renderItems}
        </Carousel>
      </div>
    </div>
  );
}

.container-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-content {
  width: 100%;
  max-width: 1440px;
}

.div-image {
  background-color: #fff;
  width: 100%;
  max-width: 416px;
  height: 280px;
}

.image {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.div-infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.info-title {
  font-family: Alliance2;
  color: #000;
  line-height: 0.76;
  font-size: 2.5rem;
  letter-spacing: normal;
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  margin: 24px 0 20px 0;
}

.info-subtitle {
  font-family: Alliance2;
  color: #000;
  line-height: 0.76;
  font-size: 1rem;
  letter-spacing: normal;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.carousel .slide {
  background-color: transparent !important;
}

You could try setting a `min-width` on your images. – cbr Jan 18 '21 at 23:18 — cbr, Jan 18 '21 at 23:18

FoundingBox · Accepted Answer · 2021-01-19T01:58:55.947

Thanks for uploading a CodeSandbox. So I took a look at how the Carousel component works and it seems like it's wrapping each item in the renderItems array with a <li class="slide" style="min-width: <SOME NUMBER>%">.

To display a different number of items in CSS you can do something like the following with media queries.

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

/* For screens with width < 600px, display 2 items */
@media only screen and (max-width: 600px) {
  .slide {
    min-width: 50% !important;
  }
}

The width percentage to use is basically equivalent to 100 / numItemsToShow, and the !important is required to override the inline style from the react-responsive-carousel package. It's generally not the best practice to use !important, so I'd recommend exploring if you can find a way to override the react-responsive-carousel packages stylesheet directly.

How do I reduce the number of images that appear on my carousel?

1 Answers1