How to prevent carousel content from showing on top of one another

Question

I want to display a number of cards in a carousel. For the carousel, I'm using react-slick. Since I want to show one card in the center, and I also want to show parts of the other cards at the ends of the carousel, I've set centerMode: true and added centerPadding:300px. The issue is, when I reduce the screen size, the cards overlap one another, and it looks horrible. How can I maintain the layout of the carousel, and ensure that there is always a certain amount of space between the cards, no matter the screen size?

import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  centerMode: true,
  centerPadding: '300px',
  slidesToShow: 1,
  slidesToScroll: 1,
}

return (
  <div style={{height: '400px', margin: '100px 10%'}}>
    <Slider {...settings}>
      <TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
      <TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
      <TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
    </Slider>
  </div>
)

If you remove centerPadding:300px. , will the overlapping still occur ? — Ken Lee, Sep 22 '21 at 06:42

score 1 · Answer 1 · answered Sep 22 '21 at 06:22

Instead of using px which is a fixed-set value, you can use vw which is short for viewport width. Say you put it to 10vw it means 10 percent of the width of the device that is loading the app, will be the size of the component that you are using it in. There is also vh, short for viewport height.

score 0 · Answer 2 · answered Sep 22 '21 at 07:00

var settings = {
  dots: true,
  infinite: false,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  centerMode: true,
  centerPadding: 300px
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        centerPadding: 150px
      }
    },

You can add responsive attribute and reduce the centerPadding by half or whatever you want and comfortable with. You can set another responsive attribute with another object values pairs in 768.

How to prevent carousel content from showing on top of one another

2 Answers2