React Horizontal Scrolling cards with Arrows on top

Question

Currently I'm using React-slick for my horizontal card scrollview, but the output is not what I exactly want. What I'm trying to achieve is this:

Where the 1 card in the front and 1 card in the back are shown half and the arrows overlap the front and back card. But currently my arrows show up in the start and end of the cards and all the cards are equally fit in one page.

CodeSandbox: https://codesandbox.io/s/gallant-chaplygin-jydsu?file=/src/App.tsx

Code:

function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div className={className} style={{ background: "#fff" }} onClick={onClick}>
      <img
        style={{ width: "20px" }}
        src="https://www.pngfind.com/pngs/m/302-3023323_arrow-pointing-to-right-comments-right-arrow-png.png"
      />
    </div>
  );
}

function SamplePrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div className={className} style={{ background: "#fff" }} onClick={onClick}>
      <img
        style={{ width: "20px" }}
        src="https://toppng.com/uploads/preview/arrow-pointing-to-the-left-115501167743epfu1fapc.png"
      />
    </div>
  );
}

export default class Responsive extends Component {
  render() {
    var settings = {
      dots: true,
      infinite: false,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 4,
      initialSlide: 0,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            initialSlide: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    };
    return (
      <div>
        <h2> Responsive </h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

Answer 1

You need to customize the slack css and change the default slack styles. Add bellow styles to css which have imported to the component:

.slick-prev {
  left: 0 !important;
  z-index: 1000;
}
.slick-prev:before {
  content: "";
}
.slick-next {
  right: 0 !important;
  z-index: 1000;
}
.slick-next:before {
  content: "";
}

Also for showing the cards not in fit mode, you need to add the centerMode setting to slack settings:

  className: "center",
  centerMode: true,
  centerPadding: "60px",

Plus, add these styles:

.center .slick-center h3 {
  opacity: 1;
  -ms-transform: scale(1.08);
  transform: scale(1.08);
}

h3 {
  background: #5f9ea0;
  color: #fff;
  font-size: 36px;
  line-height: 100px;
  margin: 10px;
  padding: 2%;
  position: relative;
  text-align: center;
}