How to show on the carousel a piece of the previous and next slide?

Question

I'm beginner in ReactJS and I would like to render the slides of my carousel showing a piece of the previous slide and also of the next slide, what I need to do is like this in the example below:

I am currently using the react-elastic-carousel library, but I am not attached to it, any library that works in ReactJS I am willing to use. Currently in my code, the slide is showing 100% of the space.

Here's my code I put into codesandbox.io:

import React from "react";
import "./styles.css";
import Carousel from "react-elastic-carousel";

export default function App() {
  return (
    <div className="App">
      <Carousel itemsToShow={1} initialActiveIndex={3}>
        <div className="div">1</div>
        <div className="div">2</div>
        <div className="div">3</div>
        <div className="div">4</div>
        <div className="div">5</div>
        <div className="div">6</div>
        <div className="div">7</div>
      </Carousel>
    </div>
  );
}

Thank you in advance for the help

Answer 1

I was able to show some of the previous and next slides by changing the overflow on the slider-container:

.rec.rec-slider-container {
  overflow: visible;
}

I would also put overflow-x: hidden; on your body so that it doesn't scroll left and right.

codesandbox.io