如何使用react-swipe渲染一张幻灯片中的许多项目？

Question

我正在使用React-swipe进行项目。我遵循主要示例。

<div>
  <ReactSwipe
    className="carousel"
    swipeOptions={{ continuous: false }}
    ref={el => (reactSwipeEl = el)}
  >
    <div>PANE 1</div>
    <div>PANE 2</div>
    <div>PANE 3</div>
  </ReactSwipe>
  <button onClick={() => reactSwipeEl.next()}>Next</button>
  <button onClick={() => reactSwipeEl.prev()}>Previous</button>
</div>

但是结果是PANE1，PANE2，PANE3都占据了整个屏幕宽度。我希望所有PANE1，PANE2和PANE3都具有60vw，以便您看到PANE1和PANE2的一部分。我想要的是像移动轮播这样的Facebook，其外观如下：

https://codesandbox.io/s/lrk6955l79?module=%2Fsrc%2FCarousel.js

谢谢。

Answer 1

在src/components中，将flex-basis的{​​{1}}属性从CarouselSlot更改为80%。而且，如果您想更改可见幻灯片的起点，则可以使用50%的{​​{1}}属性。