javascript - 如何在轮播中显示上一张和下一张幻灯片？

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>
  );
}

预先感谢您的帮助

标签： javascriptcssreactjscarouselreact-elastic-carousel

Answer 1

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

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

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

码沙盒.io