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>

    );

  }

}