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