我是ReactJS的初学者，我想渲染我的carousel的幻灯片，显示上一张幻灯片的一部分，也显示下一张幻灯片的一部分，我需要做的是像下面的例子一样：

我目前使用的是react-elastic-carousel库，但我并不依附于它，任何在ReactJS中工作的库我都愿意使用。目前在我的代码中，幻灯片显示的是100%的空间。
下面是我在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>
  );
}

提前谢谢你的帮助