如何在旋转木马上显示上一张和下一张幻灯片的一部分？

Question

我是ReactJS的初学者，我想渲染我的旋转木马的幻灯片，显示前一张幻灯片和下一张幻灯片的一部分，我需要做的是在下面的示例中如下所示：

​

​

我目前使用的是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>
  );
}

​

提前感谢您的帮助

Answer 1

通过更改滑块容器上的溢出，我可以显示一些上一张和下一张幻灯片：

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

我也会把overflow-x: hidden;放在你的身体上，这样它就不会左右滚动。

codesandbox.io